Dynamically loading child components in Angular 5

Question

I want to dynamically load the child components in angular. Parent component will load the child components based on some conditions.

Is it possible that we define the child component names in parent component typescript file and in HTML we use string interpolation to load the component?

For example in parent component typescript:

componentName = someCondition ? 'component1' : 'component2';

And in HTML

<app-{{componentName}}></app-{{componentName}}

I tried this but it's not working. Would appreciate any help on this!

angular.io/guide/dynamic-component-loader

peinearydevelopment
– peinearydevelopment

2018-08-31 15:14:55 +00:00
Commented Aug 31, 2018 at 15:14 — peinearydevelopment
– peinearydevelopment, Commented Aug 31, 2018 at 15:14

Andreq Frenkel · Accepted Answer · 2018-08-31 15:23:14Z

5

First approach:

<ng-container [ngSwitch]="componentName">
  <component-one *ngSwitchCase="'component1'"></component-one>
  <component-two *ngSwitchCase="'component2'"></component-two>
  ...
</ng-container>

Second approach componentFactoryResolver

@Component({
    selector: 'parent',
    template: `
        <div #target></div>
    `
})
export class ParentComponent {
    @Input() child: string;
    @Input() value: string;

    //Get tag child component will be placed
    @ViewChild('target', { read: ViewContainerRef }) target: ViewContainerRef;
    private componentRef:ComponentRef<any>;

    //Child components
    private children = {
        child1: Child1Component,
        child2: Child2Component
    };

    constructor(private compiler: ComponentFactoryResolver) {}

    //Pass through value to child component
    renderComponent(){
        if (this.componentRef) this.componentRef.instance.value = this.value;
    }

    //Compile child component
    ngAfterContentInit() {
        let childComponent = this.children[this.child || 'child1'];
        //Resolve child component
        let componentFactory = this.compiler.resolveComponentFactory(childComponent);
        this.componentRef = this.target.createComponent(componentFactory);
        this.renderComponent();
    }

    //Pass through value to child component when value changes
    ngOnChanges(changes: Object) {
        this.renderComponent();
    }
}

Children components should be declared as Entry components

answered Aug 31, 2018 at 15:23

Andreq Frenkel

1,20810 silver badges14 bronze badges

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

1 Comment

Romeo Sierra Over a year ago

Looks like declaring them as entry components is no longer required

Collectives™ on Stack Overflow

Dynamically loading child components in Angular 5

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