CODEWITHSUNDEEP
angular
Christoffer
Christoffer

Reputation: 615

Rendering Angular component programatically

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?

Upvotes: 1

Views: 31

Answers (1)

Zerotwelve
Zerotwelve

Reputation: 2361

one solution would be to use content-projection https://angular.io/guide/content-projection

you can use a NgSwitch in order to choose the component to show

Upvotes: 0

Related Questions