Angular 2 component polymorphism

Question

I would like to implement a component acting like a container with dynamically added child components. The type and number of child components must be configured on the server side.

So, the models that appeared on the server may look like this:

export class ModelBase {
    public data: any;
}

export class ModelA extends ModelBase {
    public dataA: any;
}

export class ModelB extends ModelBase {    
    public dataB: any
}

Simplified components may be:

@Component({
  selector: "component-base"
})
export class BaseComponent {
  @Input() model: ModelBase;
}

@Component({
  selector: "component-a",
  template: "<div>component-a</div>"
})
export class AComponent extends BaseComponent {
  @Input() model: ModelBase;
}

@Component({
  selector: "component-b",
  template: "<div>component-b</div>"
})
export class BComponent extends BaseComponent {
  @Input() model: ModelBase;
}

And here is the application and how I would like to work with my components:

@Component({
        selector: 'app',
        template: `
          <div *ngFor="#model of models">
              <component-base [model]="model"></component-base>
          </div>
        `
})
export class App {
}

I want the "component base" to be replaced by a specific implementation based on the type "model". For example, with component-a. Is it possible to implement such a workflow using Angular 2?

Answer 1

API: https://github.com/angular/angular/pull/11235.

, fooobar.com/questions/28910/.... , , .

, , ComponentBase .

export class ModelA extends ModelBase {
  dataA: any;
  component: any = AComponent;
}

@Component({
  selector: "component-base",
  template: `
    <dcl-wrapper [type]="model.component" [init-data]="model"></dcl-wrapper>
  `
})
export class BaseComponent {
  @Input() model: ModelBase;
}

@Component({
  selector: "component-a",
  template: "<div>component-a</div>"
})
export class AComponent {
  @Input() model: ModelBase;

  /**
   * Custom hook you might create in DclWrapper.
   */
  onDclInit(model: ModelBase) : void {
    this.model = model;
  }

}