0

I have a widget base Angular 4 application. This application will have a different type of widgets and any of them will be a different component. At the moment I have just wanted one type of widget and the HTML looks like this

<div [ngGrid]="gridConfig">
<div *ngFor="let widget of widgets;">
    <widget [id]="widget.id" [widgetConfig]="widget.config"></widget>
</div></div>

I have searched the web but every solution I have found doesn't seem to fit my case.

Is there any way where I can add the selector dynamically like this<{{widget.selector}} [id]="widget.id" [widgetConfig]="widget.config"></{{widget.selector}}>, Where selector would be the selector of the specific widget component.

Maciej Treder
  • 11,866
  • 5
  • 51
  • 74
ZuZu
  • 94
  • 1
  • 9
  • If you have a fixed set of widget components, you can use `*ngIf` or `*ngSwitchCase`, if you don't know in advance what the widgets will be you can take the approach demonstrated in https://stackoverflow.com/questions/36325212/angular-2-dynamic-tabs-with-user-click-chosen-components/36325468#36325468 – Günter Zöchbauer May 24 '17 at 16:16
  • 1
    You could have a dynamic component loader in place of `widget` that would take an input and render components under it! See here: https://angular.io/docs/ts/latest/cookbook/dynamic-component-loader.html – joh04667 May 24 '17 at 16:16
  • Thanks @joh04667. I end up using that technique to solve my problem. – ZuZu May 26 '17 at 12:21

0 Answers0