Load dynamic component multiple times with different data

Question

I need to load a dynamic component multiple times and pass data dynamically based on some value so that it will load with runTime data.

I have tried below example https://dzone.com/articles/how-to-dynamically-create-a-component-in-angular

as per example we have one messageComponent that have "message" property and in hostComponent we are adding one template in html file like

<div style="text-align:center">
     <h1>
         Welcome to {{ title }}!
     </h1>
     <template #messagecontainer>
     </template>
 </div>

so here in the place of template tag our messageComponent will replace.

I need something like we can iterate this template multiple times and pass different value of "message" dynamically in messageComponent.

So you want the value of the message property to update in the dynamic component every time it changes or do you want multiple dynamic components generated with different "messages"? — Narm
– Narm, Commented Sep 11, 2019 at 15:08
i want multiple dynamic components generated with different "messages " and we can update the values of messages on any click event — Sumit Sharma
– Sumit Sharma, Commented Sep 13, 2019 at 11:46

Andrei Gătej · Accepted Answer · 2019-09-11 21:28:02Z

1

Here is my approach:

in your template, create a container for all the messages

<ng-container #messageContainer></ng-container>

add a function that will allow us to create a component and insert it into the view

private createComponent (compClass) {
   const compFactory = this.cfr.resolveComponentFactory(compClass);

   return this.messageContainer.createComponent(compFactory);;
 }

load the component multiple times, depending on the incoming data; we will also keep track of the components which have been loaded in order to be able to destroy them when we need to load another dynamic component.

 private loadNewComponentList () {
   this.messages.forEach((msg, idx) => {
     this.destroyCompFromList(this.componentList[idx]);

     const comp = this.createComponent(componentMap[this._crtComp]);

     (comp.instance as any).message = msg;

     comp.changeDetectorRef.detectChanges();

     this.componentList[idx] = comp;
   });
 }

Here is a StackBlitz demo.

answered Sep 11, 2019 at 21:28

Andrei Gătej

12.1k1 gold badge22 silver badges39 bronze badges

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

1 Comment

Jaydeep Over a year ago

I tried to use comp.changeDetectorRef.detectChanges(); but it stops the loop and so other components dont get created

Collectives™ on Stack Overflow

Load dynamic component multiple times with different data

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related