Skip to main content

angular material - How to enable disable Tooltip

app.component.ts 

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})


export class AppComponent {
  isDisabled:boolean = false;

  onClick(){
    this.isDisabled = !this.isDisabled;
  }
}
app.component.html 

<h2>
  Angular Material - How to enable disable Tooltip
</h2>

<h1>Tooltip now {{isDisabled? 'disabled' : 'enabled'}}.</h1>


<button mat-flat-button
  color="warn"
  matTooltip="Sample material tooltip"
  [matTooltipDisabled]="isDisabled"
  (click)="onClick()"
  aria-label="Display a material tooltip when it is enabled
    on focused or hovered over">
      {{isDisabled? 'Enable Tooltip' : 'Disable Tooltip'}}
</button>
app.module.ts [import] 

// for material button
import {MatButtonModule} from '@angular/material/button';

// for material tooltip
import {MatTooltipModule} from '@angular/material/tooltip';
More Angular tutorials
Labels: