IgxGrid 一つのセルに複数のデータをバインドする方法

IgxGrid の表示セルに対してテンプレートを適用することで、一つのセルに複数のデータをバインドすることができます。

表示セルに対してテンプレートを適用するには、IgxCell ディレクティブを利用します。ng-template 内では、ngTemplateOutletContext 経由で IgxGridCell への参照が取れるので、変数 cell(let-cell) に格納します。変数 cell から、cell.row.rowData で行データにアクセスします。

<igx-grid #grid1 [data]="localData" [primaryKey]="'id'" [autoGenerate]="false" width="500px" height="350px">
  <igx-column field="id" header="id"></igx-column>
  <igx-column field="name" header="名前"></igx-column>
  <igx-column field="prefecture" header="場所">
    <ng-template igxCell let-cell="cell">
      <div>
        <div>{{cell.row.rowData.prefecture}}</div>
        <div>{{cell.row.rowData.city}}</div>
      </div>
    </ng-template>
  </igx-column>
</igx-grid>

実行結果

参考情報

IgxGrid > 列の構成
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