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.
Related
I am using mat-autocomplete in that when i select the dropdown and scroll the main bar then that dropbox is not moving with autocomplete input field.
enter image description here
code:
<td width = 24% *ngIf="!stock.value.status_item">
<input style="width: 167px;" type="text" placeholder="Select Item" #editInput tabindex="1" class="form-control"
matInput [matAutocomplete]="itemsAuto" [(ngModel)]="stock?.value.commodity_name" [ngModelOptions]="{standalone:true}" [disabled]=" stock.value.confirm_status" (input)="onSearch(stock?.value.commodity_name)" >
<mat-autocomplete #itemsAuto="matAutocomplete" (opened)="autocompleteScroll()">
<mat-option *ngFor="let item of ingredients" [value]="item.name" [disabled]="!isItemAvailable(item)" (click)="addStockManully(item,i)">
{{item?.name}}
<span class="styled__SelectionIcon-sc-5ssw50-7 bUDhvO" *ngIf="!isItemAvailable(item)">
</span>
<span class="styled__SelectionIcon-sc-5ssw50-7 bUDhvOs" *ngIf="isItemAvailable(item)">
</span>
</mat-option>
</mat-autocomplete>
</td>
the behavior is not wrong, Once the dropbox is rendered be it for the mat-select of mat-autocomplete, once it is rendered it would not move its position.
So one thing you can do here is that, after selecting one of the options in the dropdown. You can close the dropbox and then scroll the main bar.
Or you can just close the dropbox on the blur property of the input. So when you do something else it would immediately close the list shown in the dropdown.
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 ?
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;
}
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