Search code examples
angulartypescriptangular-template

How to enable mat tooltip if its host button is disabled in angular 9 template

I have a button that I want to display a material tooltip for only when the button is disabled. This is the button :

<button
    mat-icon-button
    #tooltip="matTooltip"
    matTooltip="Do X to create an account"
    [matTooltipDisabled]="...IDK"
    [disabled]="false"
    (click)="onAddAccountAction()"
>
<mat-icon>Add</mat-icon>
</button>

I don't know what flag/condition I should use in [matTooltipDisabled] so that the tooltip is not display when the [disabled] attribute for the same button is true.

EDIT

So I added a property in my component file (as suggested in the answer below) which should disable or enable the tooltip, which it does, but the tooltip is always disabled when the button is disabled. I want the tooltip enabled specifically when the button is disabled.

Solution

  • You need to surround it with another div/span what ever. whenever something is disable nothing that connected to it is not going to work.

    <span
    mat-icon-button
    #tooltip="matTooltip"
    matTooltip="Do X to create an account"
    [matTooltipDisabled]="...IDK"
>
<button
    [disabled]="false"
    (click)="onAddAccountAction()"
>
<mat-icon>Add</mat-icon>
</button>
</span>