wjFlexGridCellTemplateディレクティブは、FlexGrid 内の特定のセル型使用されるテンプレートを定義します。 これは、<ng-template> 要素に定義され、{@link wijmo.angular2.grid.CellTemplateType} を指定する cellType属性が含まれる必要があります。テンプレートのセル型に応じて、 wjFlexGridCellTemplateディレクティブを含む<ng-template>要素は、 wijmo.angular2.grid.WjFlexGridまたは wijmo.angular2.grid.WjFlexGridColumn ディレクティブのいずれかの子である必要があります。 列固有のセルテンプレートはwj-flex-grid-columnコンポーネントに含まれる必要があり、 列固有でないセル（行ヘッダーや左上のセルなど）は wj-flex-gridコンポーネントに含まれる必要があります。

wjFlexGridCellTemplateディレクティブを含む <ng-template>要素には、 Angular 2内挿式および他のコンポーネント/ディレクティブを含む 任意のHTMLフラグメントを含めることができます。

HTMLフラグメント内の連結では、セルコンテキストオブジェクトを含む cellローカルテンプレート変数を、 そのセルに関連する Column、Row、および Row.dataItem オブジェクトを参照する col、row、およびitemプロパティと共に使用できます。 Group や CellEdit などのセルタイプには、 書式設定されていないセル値を含む value プロパティが別途用意されています。 たとえば、次の FlexGrid コントロールでは、 行ヘッダー用、Country列の通常のセル用、 およびその列ヘッダーセル用にテンプレートが使用されています。

// component.ts
import * as wjGrid from '@mescius/wijmo.angular2.grid';

@Component({
templateUrl: './component.html',
selector: 'my-cmp',
})
export class MyCmp {
data: any[];
}

<!-- component.html -->
<wj-flex-grid [itemsSource]="data">
  <ng-template wjFlexGridCellTemplate [cellType]="'RowHeader'" let-cell="cell">
    {{cell.row.index}}
  </ng-template>
  <ng-template wjFlexGridCellTemplate [cellType]="'RowHeaderEdit'">
    ...
  </ng-template>

  <wj-flex-grid-column [header]="'Country'" [binding]="'country'">
    <ng-template wjFlexGridCellTemplate [cellType]="'ColumnHeader'" let-cell="cell">
      <img src="resources/globe.png" />
        {{cell.col.header}}
    </ng-template>
    <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell">
      <img src="resources/{{cell.item.country}}.png" />
      {{cell.item.country}}
    </ng-template>
  </wj-flex-grid-column>
  <wj-flex-grid-column [header]="'Sales'" [binding]="'sales'"></wj-flex-grid-column>
</wj-flex-grid>

cellType 属性は、次の列挙値のいずれかを取ります。

Cell

通常の（データ）セルテンプレートを定義します。wijmo.angular2.grid.WjFlexGridColumn コンポーネントの子である必要があります。 たとえば、次のセルテンプレートはCountry列のセルのフラグを示します。

<wj-flex-grid-column [header]="'Country'" [binding]="'country'">
  <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell">
    <img src="resources/{{cell.item.country}}.png" />
    {{cell.item.country}}
  </ng-template>
</wj-flex-grid-column>

階層FlexGrid （childItemsPath プロパティが指定されているグリッド）で Group テンプレートが提供されていない場合は、このColumn のグループ行の ヘッダー以外のセルにもこのテンプレートが使用されます。

CellEdit

編集モードのセルのテンプレートを定義します。wijmo.angular2.grid.WjFlexGridColumn コンポーネントの子である必要があります。 このセルタイプは、連結に利用できる cell.value プロパティを別途持ちます。 また、 編集前の元のセル値と編集後の更新値を持ちます。 たとえば、Wijmo InputNumber コントロールを"Sales"列のエディタとして使用するテンプレートを次に示します。

<wj-flex-grid-column [header]="'Sales'" [binding]="'sales'">
  <ng-template wjFlexGridCellTemplate [cellType]="'CellEdit'">
    <wj-input-number [(value)]="cell.value" [step]="1"></wj-input-number>
  </ng-template>
</wj-flex-grid-column>

ColumnHeader

列ヘッダーセルのテンプレートを定義します。 wijmo.angular2.grid.WjFlexGridColumn コンポーネントの子である必要があります。 たとえば、次のテンプレートは"Country"列のヘッダーに画像を追加します。

<wj-flex-grid-column [header]="'Country'" [binding]="'country'">
  <ng-template wjFlexGridCellTemplate [cellType]="'ColumnHeader'" let-cell="cell">
    <img src="resources/globe.png" />
      {{cell.col.header}}
  </ng-template>
</wj-flex-grid-column>

RowHeader

行ヘッダーセルのテンプレートを定義します。 wijmo.angular2.grid.WjFlexGrid コンポーネントの子である必要があります。 たとえば、次のテンプレートは行ヘッダーに行インデックスを表示します。

<wj-flex-grid [itemsSource]="data">
  <ng-template wjFlexGridCellTemplate [cellType]="'RowHeader'" let-cell="cell">
    {{cell.row.index + 1}}
  </ng-template>
</wj-flex-grid>

行ヘッダーセルが編集モードの行にある場合でも、このテンプレートが適用されます。 編集モードバージョンの行ヘッダーセルに別のコンテンツを提供するには、 RowHeaderEdit テンプレートを定義します。

RowHeaderEdit

編集モードの行ヘッダーセルのテンプレートを定義します。 wijmo.angular2.grid.WjFlexGrid コンポーネントの子である必要があります。 たとえば、次のテンプレートは編集中の行のヘッダーにドットを表示します。

<wj-flex-grid [itemsSource]="data">
  <ng-template wjFlexGridCellTemplate [cellType]="'RowHeaderEdit'">
    ...
  </ng-template>
</wj-flex-grid>

RowHeaderEdit テンプレートが適用されるセルに標準的な編集モードインジケータを追加するには、次の RowHeader テンプレートを使用します。

<wj-flex-grid [itemsSource]="data">
  <ng-template wjFlexGridCellTemplate [cellType]="'RowHeaderEdit'">
    {{&amp;#x270e;}}
  </ng-template>
</wj-flex-grid>

TopLeft

左上のセルのテンプレートを定義します。 wijmo.angular2.grid.WjFlexGrid コンポーネントの子である必要があります。 たとえば、次のテンプレートはグリッドの左上のセルに右下三角グリフを表示します。

<wj-flex-grid [itemsSource]="data">
  <ng-template wjFlexGridCellTemplate [cellType]="'TopLeft'">
    <span class="wj-glyph-down-right"></span>
  </ng-template>
</wj-flex-grid>

GroupHeader

GroupRow 内にあるグループヘッダーセルのテンプレートを定義します。wijmo.angular2.grid.WjFlexGridColumn コンポーネントの子である必要があります。

cell.row プロパティには、 GroupRow> クラスのインスタンスが含まれます。グループ化が CollectionView で行われる場合、cell.item プロパティはCollectionViewGroup オブジェクトを参照します。

たとえば、次のテンプレートは展開/折りたたみの切り替えにチェックボックス要素を使用します。

<wj-flex-grid-column [header]="'Country'" [binding]="'country'">
  <ng-template wjFlexGridCellTemplate [cellType]="'GroupHeader'" let-cell="cell">
    <input type="checkbox" [(ngModel)]="cell.row.isCollapsed"/>
    {{cell.item.name}} ({{cell.item.items.length}} items)
  </ng-template>
</wj-flex-grid-column>

Group

GroupRow 内にある通常のセル（グループヘッダーでない）のテンプレートを定義します。 wijmo.angular2.grid.WjFlexGridColumn コンポーネントの子である必要があります。 このセルタイプは、連結に利用できる cell.value プロパティを別途持ちます。 列に aggregate プロパティが指定されている場合、 その列には書式設定されていない集計値が含まれます。 たとえば、次のテンプレートは「Sales」列に集計値とグループ行セルの種類を表示します。

<wj-flex-grid-column [header]="'Sales'" [binding]="'sales'" [aggregate]="'Avg'">
  <ng-template wjFlexGridCellTemplate [cellType]="'Group'" let-cell="cell">
    Average: {{cell.value | number:'1.0-0'}}
  </ng-template>
</wj-flex-grid-column>

ColumnFooter

columnFooters パネル内にある通常のセルのテンプレートを定義します。 wijmo.angular2.grid.WjFlexGridColumn コンポーネントの子である必要があります。 このセルタイプは、連結に利用できる、セル値を含む cell.value プロパティを別途持ちます。

たとえば、次のテンプレートは「Sales」列に集計値とグループ行セルの種類を表示します。

<wj-flex-grid-column [header]="'Sales'" [binding]="'sales'" [aggregate]="'Avg'">
  <ng-template wjFlexGridCellTemplate [cellType]="'ColumnFooter'" let-cell="cell">
    Average: {{cell.value | number:'1.0-0'}}
  </ng-template>
</wj-flex-grid-column>

BottomLeft

左下のセル（行ヘッダーと列フッターが交差する位置にあるセル）のテンプレートを定義します。 wijmo.angular2.grid.WjFlexGrid コンポーネントの子である必要があります。 たとえば、次のテンプレートはグリッドの左下のセルにシグマグリフを表示します。

<wj-flex-grid [itemsSource]="data">
  <ng-template wjFlexGridCellTemplate [cellType]="'BottomLeft'">
    &amp;#931;
  </ng-template>
</wj-flex-grid>

NewCellTemplate

新しい行テンプレートのセルを定義します。 wijmo.angular2.grid.WjFlexGridColumn コンポーネントの子である必要があります。 このタイプのセルに cell.item プロパティは定義されません。 たとえば、次のセルテンプレートは「新しい行」項目のDate列セルにプレースホルダを表示します。

<wj-flex-grid-column [header]="'日付'" [binding]="'date'">
  <ng-template wjFlexGridCellTemplate [cellType]="'NewCellTemplate'">
    ここに日付を入力してください
  </ng-template>
</wj-flex-grid-column>