angulartooltipangular-materialangular5

How to get mat select selected value in tool tip using angular material


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


Solution

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