Menu
I am displaying a drop down using angular material mat select. I want to display selected element using material tool tip.
<mat-select [(ngModel)]="emp" [(value)]="selected" matTooltip="{{selected}}
(openedChange)="oChange($event)" placeholder="Employee" [formControl]="toppings" multiple>
<mat-option *ngFor="let p of emp" [value]="p" >{{p.name}}</mat-option>
</mat-select>
</mat-form-field>
But its showing [object object]
Here is content of emp
emp[
{"id":0101,"name":"damshad"},
{"id":0102,"name":"ranjan"},
{"id":0103,"name":"himanshu"},
{"id":0104,"name":"gourge"},
{"id":0105,"name":"taffic"},
{"id":0106,"name":"ajir"},
{"id":0107,"name":"mallom"}
]
Please help
404
Create Select using <mat-select> To add elements to select option, we need to use <mat-option> element. To bind value with <mat-option> , we need to use value property of it. The <mat-select> has also value property to bind selected value to keep it selected. We need to use <mat-select> inside <mat-form-field> element.
To create Angular Material select either by <mat-select> or native <select>, we need to keep them inside <mat-form-field> element. For multiple selection, we need to use multiple attribute with <mat-select> and native <select>.
Angular Material Select is created using <mat-select> which is a form control for selecting a value from a set of options. To add elements to select option, we need to use <mat-option> element. To bind value with <mat-option>, we need to use value property of it.
MatSelectModule is the API reference for Angular Material select. Create Select using <mat-select> Angular Material Select is created using <mat-select> which is a form control for selecting a value from a set of options. To add elements to select option, we need to use <mat-option> element.
Angular Material also supports use of the native <select> element inside of <mat-form-field>. The native control has several performances, accessibility, and usability advantages. In this Angular Material select dropdown example, we will use the Angular Material library to construct UI/UX.
You missed {{}} close curly braces.
I have create demo on stackblitz
Html code
<mat-select [(ngModel)]="selected" matTooltip="{{getToolTipDEata(selected)}}" multiple>
<mat-option *ngFor="let p of emp" [value]="p" >{{p.name}}</mat-option>
</mat-select>
ts code
selected=null;
emp=[{
name:'emp 1'
},{
name:'emp 2'
}]
getToolTipDEata(data){
if(data && data.length){
let msg="";
data.forEach(res=>{
msg+=res.name + " ";
})
return msg;
}else{
return "please select employee";
}
}
You can simple pass ngModel to Tooltip, Also you can change position with matTootipPosition.
<mat-select
[(ngModel)]="emp"
matTooltip="{{emp}}
matTooltipPosition='above|below|left|right'
>
<mat-option *ngFor="let p of emp" [value]="p" >{{p.name}}</mat-option>
</mat-select>
to display tooltip based on selected value you have to define id for mat-select element, than you can refer to its 'selected' property
<mat-select #testid [matTooltip]="testid .selected?.viewValue"
(openedChange)="oChange($event)" placeholder="Employee"
[formControl]="toppings" multiple>
<mat-option *ngFor="let p of emp" [value]="p" >{{p.name}}</mat-option>
</mat-select>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With