Ignite UI for Angular 9.1.6 バージョン時点での情報に基づいています。
IgxGridのboolean値のセルでチェックボックスを表示・使用したい場合は、セルテンプレートを使用してチェックボックスを配置し、チェック状態に変更があったときに発生するイベントを使用してバインドされている値を更新してください。
例えば、チェックボックスにinput（type=”checkbox”）を使用し、AngularのngModelChangeイベントを使用する場合は、以下のようになります。
<!-- app.component.html -->
<igx-grid #grid1 [data]="data" height="400px" width="100%" [autoGenerate]="false">
<igx-column field="Finished" header="完了済？">
<ng-template igxCell let-cell="cell">
<input type="checkbox" [ngModel]="cell.value" (ngModelChange)="cell.update($event)" />
</ng-template>
</igx-column>
</igx-grid>
5行目で使用しているcellは、このセルに紐づいているIgxCellComponentオブジェクトです。
サンプル
リファレンス
- 「データグリッド」→「列の構成」
- https://jp.infragistics.com/products/ignite-ui-angular/angular/components/grid/grid.html#%E5%88%97%E3%81%AE%E6%A7%8B%E6%88%90
- ※「列の構成」の中の「セル テンプレート」にチェックボックスを配置するコードスニペットがあります。
- IgxCellComponentのupdateメソッド
