Day12-Angular Material 介紹
Day13-Angular Material: Table
Day14-Angular Material: DatePicker 日期選擇器
Day15-Angular Material: Select 下拉選單
Day17-Angular Material: Dialog 彈出視窗

Angular Material-Checkbox

官方中文網站 - Checkbox

建立一個 CheckBox

1. imort module

   import { MatCheckboxModule } from '@angular/material/checkbox';
   
   @NgModule({
     imports: [
       MatCheckboxModule,
     ],
   })
   

2. 在 component 中顯示

   <!--XXX.component.html-->
   <mat-checkbox [(ngModel)]="disabled">Disabled</mat-checkbox>
   

   // XXX.component.ts
   disabled: Boolean = true;
   

3. 圖片
   

使用 Selection Model 來掌控 CheckBox

1. 建立新的 SelectionModel 型別。
   理想狀態下應該塞非 <any> 的型別。
   (true, []) => ( 是否允許複選, 初始值 )

   // XXX.component.ts
   selection = new SelectionModel<any>(true, []);
   

   <!--XXX.component.html-->
   <mat-checkbox
      [checked]="selection.isSelected(item)"
      (change)="selection.toggle(item)"
    >
   

建立 Table 中的 CheckBox

1. 線上範例（注意此版本為 5）
2. 程式碼（我這邊版本是 16，不過邏輯差不多）

   <!--XXX.component.html-->
   <ng-container matColumnDef="bs_checkbox">
     <th mat-header-cell *matHeaderCellDef style="width: 50px;">
       <mat-checkbox (change)="$event ? masterToggle() : null"
         [checked]="selection.hasValue() && isAllSelected()"
         [indeterminate]="selection.hasValue() && !isAllSelected()">
       </mat-checkbox>
     </th>
     <td mat-cell *matCellDef="let row">
       <mat-checkbox (click)="$event.stopPropagation()"
         (change)="$event ? selection.toggle(row) : null"
         [checked]="selection.isSelected(row)">
       </mat-checkbox>
     </td>
   </ng-container>
   

   // XXX.component.ts
   displayedColumns: string[] = [
     'bs_checkbox',
     ... //略
   ]
   selection = new SelectionModel<any>(true, []);
   
   /* 取得勾選的值 */
   getSelectValue(): string{
     return this.selection.selected
   }
   
   
   isAllSelected() { // 判斷是否為全部選取
     const numSelected = this.selection.selected.length;
     const numRows     = this.DataSource.data.length;
     return numSelected === numRows;
   }
   /* 翻轉 全選&全取消 */
   masterToggle() {
     this.isAllSelected()
     ? this.selection.clear()
     : this.DataSource.data.forEach(row => this.selection.select(row));
   }
   

3. 圖片
   

資料來源

Create Multi Select List with Angular CDK Selection Model