CODEWITHSUNDEEP
angularangular-materialtooltip
tru.d
tru.d

Reputation: 575

How can I add both static text and dynamic variable in mat tooltip angular?

How can I add both static text and dynamic variable in mat tooltip angular?

<span class="trim" [matTooltip]="Updated at test.updated by test.updated_at.name" > {{test.created_by.email}}</span>

Any help will be appreciated.

Upvotes: 10

Views: 15583

Answers (2)

novarx
novarx

Reputation: 525

Like so:

<span class="trim" [matTooltip]="'Updated at test.updated by ' + test.updated_at.name" > {{test.created_by.email}}</span>

when you put matTooltip in Brackets, it means you can use javascript expressions.

Its called Property Binding - http://angular.io/guide/property-binding

Upvotes: 21

errorau
errorau

Reputation: 2334

Basicly you can call a function in matTooltip as below

<span class="trim" [matTooltip]="itemtooltiptext()" > {{test.updated_at.name}}</span>

typescript

test: any = {
    updated: "updated",
    updated_at: {
      name: "errorau"
    }
  };

  itemtooltiptext() {
    return `Updated at ${this.test.updated} by ${this.test.updated_at.name}`;
  }

demo

Upvotes: 5

Related Questions