MatCheckboxでチェックボックスを作る[Angular Material]

Angular MaterialのMatCheckboxでチェックボックスを作るのは、
以下のように必要なモジュールをインポートして、テンプレートでmat-checkboxセレクタを呼びだすだけで作れます。

import { Component } from '@angular/core';
import { MatCheckboxModule } from '@angular/material/checkbox';

@Component({
  selector: 'app-checkbox',
  standalone: true,
  imports: [MatCheckboxModule],
  templateUrl: './checkbox.component.html',
  styleUrl: './checkbox.component.scss'
})
export class CheckboxComponent {

  constructor(){
  }
}

<mat-checkbox>りんご</mat-checkbox>
<mat-checkbox>バナナ</mat-checkbox>
<mat-checkbox>桃</mat-checkbox>

画面表示は以下のようなデザイン。

これに加えてリアクティブフォームやテンプレート駆動フォームなどを利用することで、変数で管理したりできます。