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.

回答1:

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>

回答2:

Ideally, you have some property that defines when the button is diabled, in which case this should be all you need:

Assuming a property is hasDisabledClick

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

Then, your tooltip is always in the opposite state of the element.

See the demo

来源：https://stackoverflow.com/questions/62349089/how-to-enable-mat-tooltip-if-its-host-button-is-disabled-in-angular-9-template

标签

angular

typescript

angular-template