Angular 2 - How to insert variable in component

Question

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>
...

Why you need dynamic directives? – AMagyar Nov 18 '16 at 11:33 — AMagyar, Nov 18 '16 at 11:33

score 3 · Accepted Answer · edited May 23 '17 at 12:25

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.

edited May 23 '17 at 12:25

Community

1
1

answered Nov 18 '16 at 11:30

Günter Zöchbauer

623,577
216
2,003
1,567

Angular 2 - How to insert variable in component

1 Answers1