Is it possible to load Angular 2 components by dynamically changing their selector name?

Question

I have two Angular 2 components, <future-todos> and <past-todos>. Can I somehow load them dynamically as shown below?

component.ts

if (condition) {
    list = 'future';
} else {
    list = 'past';
}

component.html

<{{list}}-todos></{{list}}-todos>

My actual situation is more complex, and I've omitted a lot of code to simplify this example showing my needs.

Do not miss this [How can I use/create dynamic template to compile dynamic Component with Angular 2.0?](http://stackoverflow.com/q/38888008/1679310) — Radim Köhler, Nov 19 '16 at 17:37

score 1 · Accepted Answer · answered Nov 19 '16 at 18:34

Short answer: No.

But NgSwitch can be used in this case:

HTML:

<div [ngSwitch]="list">
    <div *ngSwitchCase="future">
        <future-todos></future-todos>
    </div>
    <div *ngSwitchCase="past">
        <past-todos></past-todos>
    </div>
    <div *ngSwitchDefault>Unrecognized list type</div>
</div>

Don't forget the default type

Is it possible to load Angular 2 components by dynamically changing their selector name?

1 Answers1