Insert component dynamically in Angular 2 knowing component string name

Question

How to insert component in Angular 2+ dynamically in this situation?

<div *ngFor="let component of components">

</div>

Where components is an array of strings, one string is a single component name. How to do this in such a situation? I want all components from array to be shown.

This is an example array of components:

components: ['app-item-search-sidebar','app-item-list','app-item-create','app-item-change'];

You already have it explained in the documentation. You can use ViewContainerRef, and decorators such as @ContentChild to do so. But without an actual array I can't provide more help. — mutantkeyboard
– mutantkeyboard, Commented Jul 6, 2018 at 11:12

Prachi · Accepted Answer · 2018-07-06 11:05:29Z

1

You can use ngSwitch:

<div *ngFor="let component of components" [ngSwitch]="component">
    <div *ngSwitchCase="'child-component-one'">
         <child-component-one></child-component-one>
    </div>
    <div *ngSwitchCase="'child-component-two'">
         <child-component-two></child-component-two>
    </div>
    <div *ngSwitchCase="'child-component-three'">
         <child-component-three></child-component-three>
    </div>
    ... //append other component selectors
</div>

answered Jul 6, 2018 at 11:05

Prachi

3,60421 silver badges38 bronze badges

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

5 Comments

Chris K Over a year ago

in this situation I can't, because components is also dynamic, and I don't know whats inside, is there other option?

Prachi Over a year ago

what all variation you would be having? Please add more code.

Anuradha Gunasekara Over a year ago

So the component list is dynamic right? What you need is dynamic component loading.

Prachi Over a year ago

Right, and even in the dynamic component loading, you need to have a certain number of components in your application ready, then only it will render. You can render a component dynamically, but you cannot create a component dynamically.

Chris K Over a year ago

@Prachi I have those components ready, I just don't know how to insert them

Collectives™ on Stack Overflow

Insert component dynamically in Angular 2 knowing component string name

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related