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
– Amit, Commented Jan 18, 2019 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
– Reactgular, Commented Jan 18, 2019 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
– gabriela, Commented Jan 18, 2019 at 13:36

Amit · Accepted Answer · 2020-03-03 14:21:58Z

1

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])
     })
   }
 }

answered Mar 3, 2020 at 14:21

Amit

1,4911 gold badge17 silver badges42 bronze badges

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

Comments

user10105289 · Accepted Answer · 2019-01-18 14:00:07Z

-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, 2019 at 14:00

user10105289

324 bronze badges

1 Comment

Amit Over a year ago

Thanks for replying but this is not what I am looking for

Collectives™ on Stack Overflow

how to reload/refresh dynamically injected component Angular 6

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related