I am new to angular. Created a header component and in the header I have added another component which is having below code.
<mat-form-field class="select-comp">
<mat-label>Fruits</mat-label>
<mat-select id="select1" class="item-selector">
<mat-option *ngFor="let fruit of fruits" [value]="fruit.value">
{{fruit.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="select-comp">
<mat-label>Vegitables</mat-label>
<mat-select id="select2" class="item-selector">
<mat-option *ngFor="let vegitable of vegitables " [value]="vegitable.value">
{{vegitable.viewValue}}
</mat-option>
</mat-select></mat-form-field>
if I inspect ".mat-form-field-infix" and ".mat-select-placeholder" css display properties are showing as block , I tried to override it using display: inline !important. but it is not working and showing as block in the screen as well the property is block when we inspect. Any idea what is wrong ?
Related
I am running angular app, I have autocomplete field ,I want adjust position of this . I referred official document enter link description here under method ,
updatePosition -
Updates the position of the autocomplete suggestion panel to ensure that it fits all options within the viewport.
I am not sure how to use
This is my template.html
<mat-form-field [style.cursor]="pointer" [style.cursor]="pointer" [style.width.px]=300 >
<input class="selectCustomer" class="selectCustomerData" id="inputCustomer" matInput [matAutocomplete]="auto" [formControl]="customerFilterControl" [(ngModel)]="customerName">
<mat-icon matSuffix>keyboard_arrow_down</mat-icon>
<p id="spandiv">{{customerName}}</p>
<mat-autocomplete dropdown-arrow="true" panelWidth ="450px" #auto="matAutocomplete" [displayWith] = "displayFn">
<mat-option class="CustomerDropDown" *ngFor="let customer of filteredOptions | async" [value] ="customer.AccountID +' '+'('+ customer.AccountName + ')'" (onSelectionChange)="onCustomerChange(customer)">
{{customer.AccountID}} ({{customer.AccountName}}) <p id="spandiv1">{{customer.AccountID}} ({{customer.AccountName}})</p>
</mat-option>
</mat-autocomplete>
</mat-form-field>
As shown the pic below I want the mat-option to move little towards left
As shown in this pic, class highlighted always gets style applied to left:779px but I want to remain atv 775px
I was able to style this using
.mat-autocomplete-panel {
position:relative;
right:3px;
}
When I try and set a matInput's class to a value using "{{}}", it changes the formatting for some reason. Here's the code with curly braces plus what it
looks like.
<mat-tab label="1">
<div *ngFor="let name of playerAndID">
<h3>{{ name.name }}</h3>
<mat-form-field class="scoreInput">
<input matInput placeholder="Score" class="{{name.index}}">
</mat-form-field>
</div>
</mat-tab>
If I change the class name to anything else, it displays normally. Here's what it looks like, as well as the code:
<mat-tab label="1">
<div *ngFor="let name of playerAndID">
<h3>{{ name.name }}</h3>
<mat-form-field class="scoreInput">
<input matInput placeholder="Score" class="ANYTHING ELSE">
</mat-form-field>
</div>
</mat-tab>
How can I prevent this from happening when using the curly braces? This issue doesn't happen in any other part of my application.
It seems like when you specify the class using {{}}, it overrides the default one of "mat-input-element mat-form-field-autofill-control cdk-text-field-autofill-monitored". I was able to fix the formatting issue by changing the Id instead.
have you tried
[ngClass]="{ name.index : true }"
refer ngClass
I am running angular app, I have autocomplete when I hover over the autocomplete mat-options, I want to see entire customer number and name. I tried to do this
<mat-form-field [style.cursor]="pointer" [style.cursor]="pointer" [style.width.px]=300 >
<input class="selectCustomer" class="selectCustomerData" id="inputCustomer" matInput [matAutocomplete]="auto" [formControl]="customerFilterControl" [(ngModel)]="customerName">
<mat-icon matSuffix>keyboard_arrow_down</mat-icon>
<p id="spandiv">{{customerName}}</p>
<mat-autocomplete dropdown-arrow="true" panelWidth ="450px" #auto="matAutocomplete" [displayWith] = "displayFn">
<mat-option class="CustomerDropDown" *ngFor="let customer of filteredOptions | async" [value] ="customer.AccountID +' '+'('+ customer.AccountName + ')'" (onSelectionChange)="onCustomerChange(customer)">
{{customer.AccountID}} ({{customer.AccountName}}) <p id="spandiv1">{{customer.AccountID}} ({{customer.AccountName}})</p>
</mat-option>
</mat-autocomplete>
</mat-form-field>
Basically I want to see value when I hover on the mat-option
One easy way to do this is to put the option text inside a div element with a small max-width. Then style that div element so overflows are normally hidden, but not when the option text is being hovered.
Example: https://stackblitz.com/edit/angular-vzfpjy
One problem with this solution is that the user has to hover over the text of the option to show the full value.
Scenario :
I am using Chips Autocomplete component.
On selecting the particular option from the list it is displaying the
selected option as the chip in the input filed as shown in below
image.
Todo :
I want these chips to be displayed outside the input field, means in any other div.Like below image How can i do this ?
Here is the stackblitz link.
Move <mat-chip> out of <mat-form-field></mat-form-field>
<div>
<mat-chip
*ngFor="let fruit of fruits"
[selectable]="selectable"
[removable]="removable"
(removed)="remove(fruit)">
{{fruit}}
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip>
</div>
See here:https://stackblitz.com/edit/angular-h8zdkh-ao3bzb?file=app/chips-autocomplete-example.html
Just move the input field outside (top or bottom) of the </mat-chip-list> and you should be fine.
You might want to add some padding/margin after that :)
Use simple auto-complete to search players and display the selected players as chip-list inside the outer div as like below
<mat-form-field class="example-chip-list">
<input matInput placeholder="New fruit..." #fruitInput [formControl]="fruitCtrl" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
<mat-option *ngFor="let fruit of filteredFruits | async" [value]="fruit">
{{fruit}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
<div class="otherDiv">
<mat-chip-list>
<mat-chip *ngFor="let fruit of fruits" [selectable]="selectable" [removable]="removable" (removed)="remove(fruit)">
{{fruit}}
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip>
</mat-chip-list>
</div>
It is very simple.
as you are already using fruits array to add or remove the items,
thus you can access fruits array any where in your html file of that component
<h1> *ngFor="let fruit of fruits">{{fruit}} </h1>
How can I change the font color on the text showing the selected value from an Angular 5 material mat-select when it is set to disabled. Currently it defaults to gray color and I want to change it so that it display darkblue for both disabled and enabled.
<mat-form-field>
<mat-select placeholder="Select a Product" [(ngModel)]="selected" [disabled]="isDisabled" panelClass="my-select-panel-class">
<mat-option *ngFor="let prod of products" [value]="prod.productID">
{{ prod.key }}
</mat-option>
</mat-select>
</mat-form-field>
Found out how to change the font-color on disable mat-select element. The above ngClass does not work on the font color. It does work on the font size.
The Styling mat-select in angular-material link had the most of the answer except to override the disable font color, you will need to override the style .mat-select-value-text
e.g.
::ng-deep .mat-select-value-text {
color: rgba(0,0,0,.88);
}
You just need to use ngClass and pass appropriate conditions for styling the options.
I'm considering selected is number. If it's an FormControl then just change prod?.productID==selected.value}
<mat-form-field>
<mat-select placeholder="Select a Product" [(ngModel)]="selected" [disabled]="isDisabled" panelClass="my-select-panel-class">
<mat-option *ngFor="let prod of products" [value]="prod.productID" [ngClass]="{'font-bold':prod?.productID==selected}>
{{ prod.key }}
</mat-option>
</mat-select>
In CSS of this component define a class Font-bold as this
.font-bold {
font-weight: bold
}
Use ngClass. You can pass an object with conditions and strings matching CSS classes. Something like this:
Take a look here https://angular.io/api/common/NgClass