When attempting to render each component using ngComponentOutlet in a specific column layout with subsequent styling, the component property within widgetsByCol is returning null in the HTML, even though the components are visible when logging them through console.log(). (I aim to dynamically render the components without defining the widgets as I have currently done).
The TypeScript code snippet is provided below:
export class WidgetListComponent implements OnInit {
widgets: WidgetInterface[] = [
{ component: Test1Component, layoutCol: 1 },
{ component: Test2Component, layoutCol: 2 },
{ component: Test3Component, layoutCol: 3 },
{ component: Test3Component, layoutCol: 2 }
];
widgetsByCol = {};
ngOnInit(): void {
for (const widget of this.widgets) {
const { layoutCol, component } = widget;
if (!this.widgetsByCol[layoutCol]) {
this.widgetsByCol[layoutCol] = [];
}
this.widgetsByCol[layoutCol].push(component);
}
console.log('this.widgetsByCol', this.widgetsByCol);
}
}
The corresponding HTML snippet is presented below:
{{widgetsByCol | json}}
<div *ngFor="let col of widgetsByCol | keyvalue">
<div *ngFor="let widget of col.value">
<ng-container *ngComponentOutlet="widget.component"> </ng-container>
</div>
</div>
The output of {{widgetsByCol | json}} displays: { "1": [ null ], "2": [ null, null ], "3": [ null ] }
However, the console.log provides the following result:
{
1: [Test1Component],
2: [Teste2Component, Teste3Component],
3: [Test3Component]
}
This inconsistency raises the question of what might be causing this issue. Any insight would be greatly appreciated. Thank you.