Angular Material を使ってボタンにバッジを表示する

Angular Material の MatBadge を使えば、ボタンにバッジを付けるのは簡単だった。 簡単と言いつつ忘れるのでメモ。

環境

• Angular 11.0.3
• Angular Material 11.0.1

実装

API のページを参考にモジュールをインポートして、MatBadge を使えるようにする。 以下、ボタンにバッジを表示するサンプル。(サンプル内では MatButton も使っているから、それもインポート。)

まず、クリックされたらカウントアップする実装を追加する。

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

@Component({
  selector: 'app-badge-sample',
  templateUrl: './badge-sample.component.html',
  styleUrls: ['./badge-sample.component.css']
})
export class BadgeSampleComponent implements OnInit {

  clickCount: number = 0;

  constructor() { }

  ngOnInit(): void {
  }

  /**
   * ボタンをクリックしたらカウントアップする。
   */
  public onClick(): void {
    this.clickCount++;
  }

}

ボタンに設定した matBadge にカウント用プロパティをバインドする。

<button mat-raised-button
        [matBadge]="clickCount"
        (click)="onClick()">押す</button>

ボタンをクリックすれば、カウントアップされた値をバッジ表示する。

バッジを表示したくない時は、 matBadgeHidden にtrueを設定する。 下記、カウント用プロパティが0の場合にバッジを表示しないサンプル。

<button mat-raised-button
        [matBadge]="clickCount"
        [matBadgeHidden]="clickCount === 0"
        (click)="onClick()">押す</button>