I want to create a dynamic component, 'o-grid' that given a template defined in the 'o-grid-item' component, create as many o-grid-items as items have an array of data defined in o-grid component.
<o-grid #grid attr="grid" cols="3">
<o-grid-item>
{list.name}}
{{list.email}}
</o-grid-item>
</o-grid>
The following works but I want to avoid ngFor from the component definition
<o-grid #grid attr="grid" columns="id;name;username;email" keys="id" quick-filter-columns="name;username;email" [static-data]="getStaticData()"
cols="3">
<o-grid-item *ngFor="let list of grid.getDataArray()">
{{list.name}}
{{list.email}}
</o-grid-item>
export const DEFAULT_INPUTS_O_GRID = [
...OServiceComponent.DEFAULT_INPUTS_O_SERVICE_COMPONENT,
/*cols: Amount of columns in the grid list. Default:1*/
'cols'
];
export const DEFAULT_OUTPUTS_O_GRID = [
'onClick',
'onDoubleClick'
];
@Component({
selector: 'o-grid',
providers: [
{ provide: OntimizeService, useFactory: dataServiceFactory, deps: [Injector] }
],
templateUrl: './o-grid.component.html',
styleUrls: ['./o-grid.component.scss'],
encapsulation: ViewEncapsulation.None,
host: {
'[class.o-grid]': 'true'
}
})
export class OGridComponent extends OServiceComponent implements OnDestroy, OnInit, OnChanges {
constructor( ) {
public cols = 1;
public onClick: EventEmitter<any> = new EventEmitter();
public onDoubleClick: EventEmitter<any> = new EventEmitter();
@ContentChildren(OGridItemComponent) inputGridItems: QueryList<OGridItemComponent>;
public gridItems: OGridItemComponent[];
ngOnInit(): void {
this.initialize();
}
ngAfterContentInit(): void {
this.gridItems = this.inputGridItems.toArray();
};
}<mat-grid-list [cols]="cols">
<mat-grid-tile *ngFor="let item of gridItems" >
<ng-container *ngTemplateOutlet="item.template"></ng-container>
</mat-grid-tile>
</mat-grid-list>}
@Component({
selector: 'o-grid-item-',
templateUrl: './o-grid-item.component.html',
encapsulation: ViewEncapsulation.None,
host: {
'[class.o-grid-item]': 'true'
}
})
export class OGridItemComponent {
modelData: Object;
@ViewChild(TemplateRef) public template: TemplateRef<any>;
constructor(
) {
}
<mat-grid-list [cols]="cols">
<mat-grid-tile *ngFor="let item of gridItems" >
<ng-container *ngTemplateOutlet="item.template"></ng-container>
</mat-grid-tile>
</mat-grid-list>