Angular 一覧にチェックボックスが表示されない

Question

実現したいこと

Angularで勉強がてらGUIの作成をしています。
チェックボックス、日付、時間を一覧表示するテーブルを作成しようとしています。

参考
こちらのサイトをほぼコピペして実行してみたのですがチェックボックスが全く表示されません。
実行結果は以下の通りです。

何が原因かわからないためお気づきの点ございましたらよろしくお願いします。

発生している問題・エラーメッセージ

特にエラーは発生していません。

該当のソースコード

<div class="block-header">
  <p>オーダー一覧</p>
</div>
<div class="button">
  <div class="toreviewbutton">
    <button igxButton="outlined" routerLink="/review">
      レビュー画面へ
    </button>
  </div>
  <div class="databutton">
    <button igxButton="outlined">
      データ連携
    </button>
  </div>
</div>
<hr>

<div class="example-container mat-elevation-z8">
  <mat-table #table [dataSource]="dataSource">

    <!-- Checkbox Column -->
    <ng-container matColumnDef="select">
      <mat-header-cell *matHeaderCellDef>
        <mat-checkbox (change)="$event ? masterToggle() : null"
                      [checked]="selection.hasValue() && isAllSelected()"
                      [indeterminate]="selection.hasValue() && !isAllSelected()">
        </mat-checkbox>
      </mat-header-cell>
      <mat-cell *matCellDef="let row">
        <mat-checkbox (click)="$event.stopPropagation()"
                      (change)="$event ? selection.toggle(row) : null"
                      [checked]="selection.isSelected(row)">
        </mat-checkbox>
      </mat-cell>
    </ng-container>
        
    <ng-container matColumnDef="id">
      <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
      <mat-cell *matCellDef="let data"> {{data.id}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="day">
      <mat-header-cell *matHeaderCellDef> date </mat-header-cell>
      <mat-cell *matCellDef="let data"> {{data.day}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="time">
      <mat-header-cell *matHeaderCellDef> time </mat-header-cell>
      <mat-cell *matCellDef="let data"> {{data.time}} </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="columnName"></mat-header-row>
    <mat-row *matRowDef="let row; columns: columnName;" (click)="selection.toggle(row)"></mat-row>
  </mat-table>
</div>

<mat-checkbox></mat-checkbox>

.button {
  text-align: center;
}

.toreviewbutton {
  display: inline-block;
  margin-right: 100px;
}

.databutton {
  display: inline-block;
}


.example-container {
  display: flex;
  flex-direction: column;
  max-height: 500px;
  min-width: 300px;
}

.mat-table {
  overflow: auto;
  max-height: 500px;
}

.mat-column-select {
  overflow: visible;
}

import { Component } from '@angular/core';
import { SelectionModel } from '@angular/cdk/collections';//チェックボックスように追加
import { MatTableDataSource } from '@angular/material/table';
export interface FoodModel {
  day: string;
  id: number;
  time: string;
}

const FOOD_DATA: FoodModel[] = [
  { id: 1, day: '2023/7/25', time: '09:20:15' },
  { id: 2, day: '2023/7/25', time: '09:20:16' },
  { id: 3, day: '2023/7/25', time: '09:20:17' },
  { id: 4, day: '2023/7/25', time: '09:20:18' },
  { id: 5, day: '2023/7/25', time: '09:20:19' },
  { id: 6, day: '2023/7/25', time: '09:20:20' },
  { id: 7, day: '2023/7/25', time: '09:20:21' },
  ];


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

export class OrderComponent {
  columnName = ['id', 'day', 'time'];
  dataSource = new MatTableDataSource<FoodModel>(FOOD_DATA);
  selection = new SelectionModel<FoodModel>(true, []);

  /** Whether the number of selected elements matches the total number of rows. */
  isAllSelected() {
    const numSelected = this.selection.selected.length;
    const numRows = this.dataSource.data.length;
    return numSelected === numRows;
  }

  /** Selects all rows if they are not all selected; otherwise clear selection. */
  masterToggle() {
    this.isAllSelected() ?
      this.selection.clear() :
      this.dataSource.data.forEach(row => this.selection.select());
  }
}

補足情報（FW/ツールのバージョンなど）

Package Version

@angular-devkit/architect 0.1601.6
@angular-devkit/build-angular 16.1.6
@angular-devkit/core 16.1.6
@angular-devkit/schematics 16.1.6
@angular/cdk 16.1.6
@angular/cli 16.1.6
@angular/material 16.1.6
@schematics/angular 16.1.6
rxjs 7.8.1
typescript 5.1.6
zone.js 0.13.1

Answer 1

checkboxの列をorder.component.tsに定義し忘れていた。