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
– AMagyar

2016-11-18 11:33:17 +00:00
Commented Nov 18, 2016 at 11:33 — AMagyar
– AMagyar, Commented Nov 18, 2016 at 11:33

Community · Accepted Answer · 2017-05-23 12:25:43Z

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, 2017 at 12:25

CommunityBot

11 silver badge

answered Nov 18, 2016 at 11:30

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 2 - How to insert variable in component

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related