Angular 4 - How to display the template of the inheriting class component

Question

I'm trying to display a list of items (components) according to their types:

I have an array of components. All inherits from a base class. The array type is defined as that of the base class. I want to display the array (let say as a list of items) each with its own template, rather than the base template.

I have tried that:

In the app.component.html:

<app-shape *ngFor="let shape of shapes"></app-shape>

In the app.component.ts:

shapes: ShapeComponent[] = [new CircleComponent(), new SquareComponent()];

I have defined 3 Components:

export class ShapeComponent {
}

export class CircleComponent extends ShapeComponent{
}

export class SquareComponent extends ShapeComponent{
}

And the result is that I get a list of shapes.

Does Angular support such a thing?

Thanks!

Answer 1

Declarative approach

You can use ngComponentOutlet.

Code:

shapes: ShapeComponent[] = [CircleComponent, SquareComponent];

template:

<ng-container *ngFor="let shape of shapes">
    <ng-container *ngComponentOutlet="shape">
    </ng-container>
</ng-container>

ngComponentOutlet - Instantiates a single Component type and inserts its Host View into current View. NgComponentOutlet provides a declarative approach for dynamic component creation.

NgComponentOutlet requires a component type, if a falsy value is set the view will clear and any existing component will get destroyed.

So, no hard code needed in template. *ngFor will iterate over component types array in your code

Update

Don't remember add dynamic rendering component to entryComponents of AppModule:

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, HelloComponent, AComponent, BComponent ],
  entryComponents: [
    AComponent, BComponent 
  ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

StackBlitz Demo

Imperative approach with setting data

app-component.template:

<ng-container #comps>

</ng-container>

Get access to #comps(ng-container) view by ViewChild decorator and create components. So you can't initilize component like b = new BComponent().

1. First need to resolve component factory.
2. Initialize component via viewContainerRef's createComponent method. It returns reference to instantiated component
3. By the reference, get access to instance property and update any data as you need

app-component.ts:

 @ViewChild('comps', { read: ViewContainerRef }) comps: ViewContainerRef;
  constructor(private componentFactoryResolver: ComponentFactoryResolver) {

  }

ngOnInit() {
    this.comps.clear();
    let aComponentFactory = this.componentFactoryResolver.resolveComponentFactory(this.compArr[0]);
    let aComponentRef = this.comps.createComponent(aComponentFactory);
    (<AComponent>aComponentRef.instance).name = 'A name';

    let bComponentFactory = this.componentFactoryResolver.resolveComponentFactory(this.compArr[1]);

    let bComponentRef = this.comps.createComponent(bComponentFactory);
    (<BComponent>bComponentRef.instance).name = 'B name';
  }

StackBlitzh Demo

Answer 2

Each component must have separate selector.

import {Component} from "@angular/core";

@Component({
  selector: "app-shape" //maybe even is not needed here
})
class Shape {

}

@Component({
  selector: "app-rect"
})
class Rect extends Shape {

}

So you can do something like this.

<div *ngFor="let shape of shapes">
  <app-rect *ngIf="//check if shape is rect"></app-rect>
  <app-circle *ngIf="//check if shape is circle"></app-circle>
</div>