2

I would like to dynamically load a component. So I tried this approach but it didn't worked:

<page-{{current_page}}></page-{{current_page}}>

Currently I'm using this approach but it doesn't seems efficient:

<div *ngIf="current_page==1">
    <page-1></page-1>
</div>
<div *ngIf="current_page==2">
    <page-2></page-2>
</div>
...
Rahul Dagli
  • 3,941
  • 13
  • 45
  • 81

1 Answers1

3

This is not supported. String interpolation {{}} can only be used for property-values and element-content, but not for element-names or attribute-names.

Perhaps ViewContainerRef.createComponent() can do what you need.

For an example see Angular 2 dynamic tabs with user-click chosen components

If you have a limited set of components you want to display, *ngIf or ngSwitchCase is the way to go.

Community
  • 1
  • 1
Günter Zöchbauer
  • 558,509
  • 191
  • 1,911
  • 1,506