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
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";
}
}