任意のコンポーネントクラスのインスタンスを作成してロードするには、wj-component-loader コンポーネントの代わりにwj-component-loader コンポーネントを使用します。 また、インスタンス化されたコンポーネントに一連のプロパティ値を渡すこともできます。

wj-component-loaderコンポーネントを使用してインスタンス化される各コンポーネントクラスは、 アプリケーションの@NgModuleデコレータの entryComponents 配列で宣言する必要があります。

以下の例では、データモデル内の列定義配列で動的に生成された列を持つFlexGridを示しています。 列定義には、セルテンプレートとして使用できるコンポーネントクラスへの 参照をオプションで含めることができます。 wj-component-loader コンポーネントは、セルテンプレート内のそのような コンポーネントをインスタンス化するために使用されます。

HTML
 
<wj-flex-grid #flex [itemsSource]="data">
 <wj-flex-grid-column *ngFor="let col of columns"
       [header]="col.header"
        [binding]="col.binding"
        [format]="col.format"
        [width]="col.width">
    <ng-template *ngIf="col.cellTemplate"
              wjFlexGridCellTemplate [cellType]="'Cell'"
              let-cell="cell">
         <wj-component-loader [component]="col.cellTemplate"
                 [properties]="{item: cell.item}">
         </wj-component-loader>
    </ng-template>
</wj-flex-grid-column>
</wj-flex-grid>
 
 
TypeScript
 
@Component({
...
})
export class AppCmp {
    columns: any[];

    constructor() {
        this.columns = [
            { header: 'Product', binding: 'product' },
            { header: 'Revenue', binding: 'amount', format: 'n0' },
            {
                header: 'Expense',
binding: 'amount2',
cellTemplate: ExpenseCellCmp
            }
        ];
    }
}

@Component({
...
})
export class ExpenseCellCmp {
    item: any;
}
 
@NgModule({
    imports: [CommonModule, WjGridModule],
    declarations: [AppCmp],
    entryComponents: [ExpenseCellCmp]
})