Dynamically change displayed angular child component

Question

I have a parent component in which I have set up an array of child components (each extending BaseChild). I use an *ngFor to loop through the children and display their name. I would like to click on the name of the child and insert the html of the child into the parent. However I don't want to hardcode a lot of *ngIf={{child1ShouldBeDisplayed}} in the parent html - there will be a lot of children and things will get very ugly.

I've tried using ng-content as suggested here but it seems that this is for injecting parent html into the child (from here). I've read through a description of ng-template, ng-container etc here but it doesn't seem to meet my needs.

Here is a StackBlitz which sets up the basic code. I'm not sure how to continue. Is there a way to choose which child to display in the parent without the use of loads of *ngIf statements?

Marcell Kiss · Accepted Answer · 2020-07-23 12:15:01Z

1

There is a great tutorial for this on the official Angular site, with a stackblitz example.

Summary

You need to create a directive. You'll apply your components dynamically through this directive:

@Directive({
  selector: '[dynamic-stuff]',
})
export class DynamicStuffDirective {
  constructor(public viewContainerRef: ViewContainerRef) { }
}

You need a reference to this element (<ng-emplate dynamic-stuff></ng-template>):

@ViewChild(DynamicStuffDirective, {static: true}) dynamicStuff: DynamicStuffDirective;

You have to create a component factory for your component:

const componentFactory =
  this.componentFactoryResolver.resolveComponentFactory(selectedComponent);

You have to apply it through the viewContainerRef of the directive:

this.dynamicStuff.viewContainerRef.clear();
this.dynamicStuff.viewContainerRef.createComponent(componentFactory);

Good luck, I hope I could help.

edited Jul 23, 2020 at 12:15

answered Jul 23, 2020 at 11:23

Marcell Kiss

5764 silver badges11 bronze badges

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

Collectives™ on Stack Overflow

Dynamically change displayed angular child component

1 Answer 1

Summary

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Summary

Comments

Your Answer

Sign up or log in

Post as a guest

Related