how to reload/refresh dynamically injected component Angular 6

Question

I am trying to inject component dynamically based on the value selected by the user in a dropdown.

My requirement is that whenever a user changes the value of drop-down and click on view component gets injected but again if the user changes the dropdown value and clicks on view same injected component should be re-rendered but instead one new component gets injected.

Is there any way we can achieve this.

Note: on dropdown change, a service is called and different data will be returned from the server.

Stackblitz for the issue: https://stackblitz.com/edit/angular-cszxfs?file=src%2Fapp%2Fapp.component.ts

Thanks in advance

@cgTag I mean to say that component should be re-rendered with new data — Amit, Jan 18 '19 at 13:29
You have to use a service with observables and emit new values that the component subscribes to. Updating the data for a component has nothing to do with using component factories. Since the component can not have input binding you have to figure out how to send it data on your own. — Reactgular, Jan 18 '19 at 13:34
why do you need to inject dynamically a component based on the value of the droprown? A ngIf or hide property doesn't do the work? — gabriela, Jan 18 '19 at 13:36
"a service is called and different data will be returned from the server" Why not creating a generic component and pass the name of the service as an input? — gabriela, Jan 18 '19 at 13:38
@gabriela its just for reference I have a large number of component and the dropdowns are in a different component which is also getting generated dynamically based on the template selected by the user. to achieve that i am using this approach — Amit, Jan 18 '19 at 13:39
then the solution proposed by cgTag is pretty suitable in this case — gabriela, Jan 18 '19 at 13:40
is there any way I can find and remove the injected component — Amit, Jan 18 '19 at 13:41
this is what I was looking for: https://stackoverflow.com/questions/44939878/dynamically-adding-and-removing-components-in-angular — Amit, Jan 18 '19 at 14:42

score 1 · Accepted Answer · answered Mar 03 '20 at 14:21

So first I am removing the components and then adding it back in the view:

here goes my code:

 renderTreeListReport(element: string) {
   this.removeComponents();
   const component = resultComponent[element];
   const factory = this.resolver.resolveComponentFactory<any>(component);
   this.component = this.resultcontainer.createComponent(factory);
   this.components.push(this.component);//for tracking the components created
   this.component.instance.config = this.config;
   this.component.instance.pagingInfo = this.pageble;
 }


 public removeComponents() {
   const components = this.components;
   if (components.length > 0) {
     components.forEach(comp => {
       this.resultcontainer.remove(components[comp])
     })
   }
 }

score -1 · Answer 2 · answered Jan 18 '19 at 14:00

-1

<div *ngIf="somecondition">
<app-componentOne></app-componentOne>
</div>

<div *ngIf="somecondition">
<app-componentTwo></app-componentTwo>
</div>

like that you can import more that one component on selection of dropdown in ng if just manage your condition if that is true accordingly component will display..

answered Jan 18 '19 at 14:00

user10105289

32
4

Thanks for replying but this is not what I am looking for – Amit Jan 18 '19 at 14:13

how to reload/refresh dynamically injected component Angular 6

2 Answers2