I am trying to make a dashboard component in Angular, that takes an array of "Widgets" as input.
export interface Widget {
x: number;
y: number;
component: ?; // <-- here is the problem
}
...
export class Dashboard...
...
@Input() widgets: Widget[] = [];
...
And the declaration in the App component:
// template
<dashboard [widgets]="widgets()"></dashboard>
// component code
widgets(): Widget[] {
return [
{ x: 0, y: 0, component: ? }, <-- here is the problem
];
}
See that "component" property on Widget? That is what I am trying to solve. What I want to do is to declare a component that should be rendered inside the widget.
Here is how I use the array to render widgets inside the dashboard template HTML:
<dashboard-widget *ngFor="let widget of widgets"
[x]="widget.x"
[y]="widget.y"
[component]="widget.component">
</dashboard-widget>
And in the widget component the problem arises... how do I render the declared component inside the widget?
I have tried a similar approach to Routing and used Type as the component property's type, but I don't understand how to "convert" that into a DOM object that I can render.
I have tried Element and ElementRef but then I don't understand what to send in the dashboard-widget declaration in the dashboard template.
What would be the way to do this?
