WjComponentLoader Class

Use the wj-component-loader component to create and load an instance of an arbitrary component class in place of wj-component-loader. You can also pass a set of property values to the instantiated component.

Note that any component class which is expected to be instantiated using the wj-component-loader component must be declared in the entryComponents array of the application @NgModule decorator.

The example below demonstrates FlexGrid with columns dynamically generated form the column definitions array in the data model. Column definition can optionally contain a reference to a component class that should be used as a cell template. The wj-component-loader component is used to instantiate such a component in the cell template.

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]
})