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

Question

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

Answer 1

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

Answer 2

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>

Answer 3

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>

Answer 4

I think you missed } in this matTooltip="{{selected}

Answer 5

original code

<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>

my code

<mat-select [(ngModel)]="emp" [(value)]="selected" matTooltip="{{toppings.value.name}} 
(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>

Answer 6

If you simply want to get what's displayed on the mat-select "trigger" in tooltip, use triggerValue:

<mat-select #matSelect [matTooltip]="matSelect.triggerValue">
</mat-select>

works with ngModel, reactive forms and multiple selection