<section>

  <div>
    <p>
      isDisabled: {{isDisabled}}, clickCounter:
      <span id="click-counter">{{clickCounter}}</span>
    </p>
    <button mat-raised-button (click)="isDisabled=!isDisabled" id="disable-toggle">
      Disable buttons
    </button>
  </div>

  <button mat-button [disabled]="isDisabled" (click)="clickCounter=clickCounter+1" id="test-button">
    off
  </button>

  <button mat-button color="primary" [disabled]="isDisabled">
    off
  </button>

  <a href="http://www.google.com" mat-button color="accent" [disabled]="isDisabled">
    off
  </a>

  <button mat-raised-button color="primary" [disabled]="isDisabled">
    off
  </button>

  <button mat-mini-fab [disabled]="isDisabled" aria-label="Check">
    <mat-icon>check</mat-icon>
  </button>

  <button mat-icon-button color="accent" [disabled]="isDisabled" aria-label="Check">
    <mat-icon>favorite</mat-icon>
  </button>
</section>
