Angular mat-tooltip calling a function

Question

I want to call a method selections() from button tooltip which does something and returns a string that needs to be displayed on hovering the tooltip. I tried interpolating the returned value on html, but it didn't work

app.component.html

<button mat-raised-button
      matTooltip={{selections()}}
      matTooltipClass = "test"
      aria-label="Button that displays a tooltip when focused or hovered 
      over">
Action
</button>

The string "selected" needs to be returned from the function and to be displayed on hovering the tooltip

app.component.ts

selections() {
this.selectedelems = [];
this.selection.selected.map(id => this.tableData.data.filter((row: any) => 
{
  if (row._id === id) {
    this.selectedelems.push(row.name);
    this.selected = this.selectedelems.join('\r\n');
    }
}));
return this.selected;
}

Answer 1

You need to use a template expression via property binding.. the following should call your method and receive the returned string.

<button mat-raised-button
      [matTooltip]="selections()"
      matTooltipClass = "test"
      aria-label="Button that displays a tooltip when focused or hovered 
      over">
Action
</button>

---

The following link is information on template expressions

https://angular.io/guide/template-syntax#template-expressions

The following link is information on property binding

https://angular.io/guide/template-syntax#property-binding

---

Please Note:

Although this is also a viable solution to populating the tooltip via component method, per the comments below this was not the root issue to this question and interpolation would have worked in this scenario as well. matTooltip="{{selections()}}"