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

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

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

## 列テンプレート
`igx-column` で指定できるテンプレートが3種類あります。
詳しい説明は [列の構成](https://jp.infragistics.com/products/ignite-ui-angular/angular/components/grid.html#%E5%88%97%E3%81%AE%E6%A7%8B%E6%88%90) を見ていただくとして、以下にまとめてみました。

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

|テンプレート種類|ディレクティブ|コンテキスト|使い所|
|---|---|---|---|
|列ヘッダーテンプレート|igxHeader|$implicit: [IgxColumnComponent](https://jp.infragistics.com/products/ignite-ui-angular/docs/typescript/classes/igxcolumncomponent.html) |ヘッダーに画像、アイコン、ボタンなどを配置したい場合
|表示セルテンプレート|igxCell|$implicit: cell value<br>cell: [IgxGridCellComponent](https://jp.infragistics.com/products/ignite-ui-angular/docs/typescript/classes/igxgridcellcomponent.html)|セル内に画像、アイコン、ボタン、チャートなどを配置したい場合|
|編集セルテンプレート|igxCellEditor|$implicit: cell value<br>cell: [IgxGridCellComponent](https://jp.infragistics.com/products/ignite-ui-angular/docs/typescript/classes/igxgridcellcomponent.html)|コンボボックスなど特殊なエディターを配置したい場合([実例](https://jp.infragistics.com/products/ignite-ui-angular/angular/components/grid_editing.html))|

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

```html
<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](https://jp.infragistics.com/products/ignite-ui-angular/docs/typescript/classes/igxgridcomponent.html#dropareatemplate)|なし|メッセージおよびレイアウトを変更したい場合。ただしメッセージを変えるだけなら [dropAreaMessage](https://jp.infragistics.com/products/ignite-ui-angular/docs/typescript/classes/igxgridcomponent.html#dropareamessage) だけで十分。|
|エンプティグリッドテンプレート|[emptyGridTemplate](https://jp.infragistics.com/products/ignite-ui-angular/docs/typescript/classes/igxgridcomponent.html#emptygridtemplate)|なし|データが空のときのメッセージおよびレイアウトを変更したい場合。ただしメッセージを変えるだけなら [emptyGridMessage](https://jp.infragistics.com/products/ignite-ui-angular/docs/typescript/classes/igxgridcomponent.html#emptygridmessage) だけで十分。|
|ページネーションテンプレート|[paginationTemplate](https://jp.infragistics.com/products/ignite-ui-angular/docs/typescript/classes/igxgridcomponent.html#paginationtemplate)|$implicit: [IgxGridComponent](https://jp.infragistics.com/products/ignite-ui-angular/docs/typescript/classes/igxgridcomponent.html) |独自のページネーションを実装したい場合|
|ツールバーコンテンツテンプレート|igxToolbarCustomContent|grid: [IGroupByRecord](https://jp.infragistics.com/products/ignite-ui-angular/docs/typescript/classes/igxgridcomponent.html)<br>toolbar: IgxGridToolbarComponent|ツールバーに検索ボックスを入れるなど機能を拡張したい場合|
|[グループ行テンプレート](https://jp.infragistics.com/products/ignite-ui-angular/angular/components/grid_groupby.html#%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%E8%A1%8C%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88)|igxGroupByRow|$implicit: [IGroupByRecord](https://jp.infragistics.com/products/ignite-ui-angular/docs/typescript/interfaces/igroupbyrecord.html)|グルーピングした際の表示を変更したい場合|

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

```html
<!-- ドロップエリアテンプレート -->
<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