Angular2 - Dynamically add selector in template

Question

I would like to dynamically build selector or call component in the template with a property. Like in this plunker.

Example :

<!-- What I want to do -->
<frame-{{type}}></frame-{{type}}>

<!-- Or -->
<frame [type]="{{type}}"></frame>

Is there a workaround for this or is it not possible with angular2 ?

Günter Zöchbauer · Accepted Answer · 2017-01-26T06:58:47.120

2

That's at least currently not supported. Components and directives are only applied to static HTML.

You can use ~~DynamicComponentLoader~~ ViewContainerRef.createComponent to imperatively add/remove comonents.

edited Jan 26 '17 at 06:58

answered Mar 03 '16 at 13:38

1

For information, how to use it : http://plnkr.co/edit/txdW7zCFL7fADIuvpiip?p=preview – Zysce Mar 03 '16 at 15:20
Is this feature still not supported in angular 2? – PaladiN Jan 26 '17 at 06:53
No, and unlikely it ever will. – Günter Zöchbauer Jan 26 '17 at 06:58
@Zysce your plunker is deprecated. :( – PaladiN Jan 26 '17 at 07:12
The RC.7 Plunker in http://stackoverflow.com/questions/36325212/angular-2-dynamic-tabs-with-user-click-chosen-components/36325468#36325468 works and the code should still be the same even in Angular 4 – Günter Zöchbauer Jan 26 '17 at 07:14
1

You can also have a look at https://github.com/angular/angular.io/pull/2896/files (just merged). I haven't found it on http://angular.io yet (should appear soon). – Günter Zöchbauer Jan 26 '17 at 07:27
1

Thanks figured it out using your solution stated here: http://stackoverflow.com/questions/36325212/angular-2-dynamic-tabs-with-user-click-chosen-components/36325468#36325468 Will check that file. – PaladiN Jan 26 '17 at 11:26

1 Answers1