igx-grid のテンプレートを使ったカスタマイズさまざま #Angular

2018/12/16(Sun) 時点の情報に基づいています

igx-grid をさらにカスタマイズする方法として、テンプレート機能があります。Angular 　の ng-template として定義して使用することができます。

列テンプレート

igx-column で指定できるテンプレートが3種類あります。
詳しい説明は列の構成を見ていただくとして、以下にまとめてみました。

中でも、表示セルテンプレートがおそらく最も利用頻度の高いテンプレートだと思います。

テンプレート種類	ディレクティブ	コンテキスト	使い所
列ヘッダーテンプレート	igxHeader	$implicit: IgxColumnComponent	ヘッダーに画像、アイコン、ボタンなどを配置したい場合
表示セルテンプレート	igxCell	$implicit: cell value cell: IgxGridCellComponent	セル内に画像、アイコン、ボタン、チャートなどを配置したい場合
編集セルテンプレート	igxCellEditor	$implicit: cell value cell: IgxGridCellComponent	コンボボックスなど特殊なエディターを配置したい場合(実例)

以下の様に、一つの列に対して一度に全てのテンプレートを指定するようなことも可能です。

<igx-column [field]="'xxx'">
  <!-- 列ヘッダーテンプレート -->
  <ng-template igxHeader let-column>
    {{ column.header | lowercase }}
  </ng-template>

  <!-- 表示セルテンプレート -->
  <ng-template igxCell let-value let-cell="cell">
    <ul>
      <li>value: {{ value | uppercase }}</li>
      <li>rowIndex: {{ cell.rowIndex }}</li>
      <li>columnIndex: {{ cell.columnIndex }}</li>
    </ul>
  </ng-template>

  <!-- 編集セルテンプレート -->
  <ng-template igxCellEditor let-value let-cell="cell">
    <input [(ngModel)]="cell.editValue">
  </ng-template>
</igx-column>

その他のテンプレート

igx-grid レベルで指定可能なテンプレートもいくつかあるので紹介したいと思います。

テンプレート種類	プロパティ/ディレクティブ	コンテキスト	使い所
ドロップエリアテンプレート	dropAreaTemplate	なし	メッセージおよびレイアウトを変更したい場合。ただしメッセージを変えるだけなら dropAreaMessage だけで十分。
エンプティグリッドテンプレート	emptyGridTemplate	なし	データが空のときのメッセージおよびレイアウトを変更したい場合。ただしメッセージを変えるだけなら emptyGridMessage だけで十分。
ページネーションテンプレート	paginationTemplate	$implicit: IgxGridComponent	独自のページネーションを実装したい場合
ツールバーコンテンツテンプレート	igxToolbarCustomContent	grid: IGroupByRecord toolbar: IgxGridToolbarComponent	ツールバーに検索ボックスを入れるなど機能を拡張したい場合
グループ行テンプレート	igxGroupByRow	$implicit: IGroupByRecord	グルーピングした際の表示を変更したい場合

上記のテンプレートを全て実装すると以下の様になります。

<!-- ドロップエリアテンプレート -->
<ng-template #dropAreaTemplate>
  ドロップしてください
</ng-template>

<!-- エンプティグリッドテンプレート -->
<ng-template #emptyGridTemplate>
  <h2>空です</h2>
</ng-template>

<!-- ページネーションテンプレート -->
<ng-template #paginationTemplate let-grid>
  <button (click)="grid.previousPage()"
          igxButton="icon"
          igxRipple
          igxRippleCentered="true">
      <igx-icon>chevron_left</igx-icon>
  </button>
  <span>{{ grid.page + 1 }} of {{ grid.totalPages }}</span>
  <button (click)="grid.nextPage()"
          igxRipple
          igxRippleCentered="true"
          igxButton="icon">
      <igx-icon>chevron_right</igx-icon>
  </button>
</ng-template>

<igx-grid [data]="data"
          [dropAreaTemplate]="dropAreaTemplate"
          [emptyGridTemplate]="emptyGridTemplate"
          [paginationTemplate]="paginationTemplate">
  <!-- ツールバーコンテンツテンプレート -->
  <ng-template igxToolbarCustomContent let-grid="grid" let-toolbar="toolbar">
    <igx-input-group type="search"
                     class="offset"
                     [displayDensity]="'compact'">
      <igx-prefix>
        <igx-icon *ngIf="search.value.length === 0">search</igx-icon>
        <igx-icon *ngIf="search.value.length > 0"
                  (click)="grid.clearSearch(); search.value = '';">clear</igx-icon>
      </igx-prefix>
      <input #search
             igxInput
             placeholder="Search"
             (input)="grid.findNext(search.value)">
      <igx-suffix *ngIf="search.value.length > 0">
        <igx-icon (click)="grid.findPrev(search.value)">chevron_left</igx-icon>
        <igx-icon (click)="grid.findNext(search.value)">chevron_right</igx-icon>
      </igx-suffix>
    </igx-input-group>
  </ng-template>

  <!-- グループ行テンプレート -->
  <ng-template igxGroupByRow let-groupRow>
    <span>{{ groupRow.value }} / {{ groupRow.records.length }}</span>
  </ng-template>
</igx-column>

まとめ

列テンプレートにしてもその他のテンプレートにしても、ng-template に渡されるコンテキストがとても重要です。これを知らないと、テンプレートを十分に使いこなすことができないでしょう。

コンテキストをしっかりと把握し、テンプレート機能を最大限に利用して、igx-grid に柔軟な表現をもたらしましょう！

Ignite UI for Angular が気になった方はこちら

デモサイトで様々なサンプルを試すことができますので色々試してみてください！
https://jp.infragistics.com/products/ignite-ui-angular/angular/components/grid_virtualization.html