CODEWITHSUNDEEP
angular
Weblurk
Weblurk

Reputation: 6812

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

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.

Upvotes: 1

Views: 202

Answers (1)

Weblurk
Weblurk

Reputation: 6812

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

Upvotes: 1

Related Questions