Dynamic ngFor tags in Angualar2?

Question

Angular

Faced a problem, there is an array that contains objects:

this.dataCell = [
            {"id": "1", "fill": "#D9D9D9", "type": "path", "d": "L111.2,484.7"},
            {"id": "2", "fill": "#FF0000", "type": "polyline", "points": "L327,53.1"},
            {"id": "3", "fill": "#772BA9", "type": "polyline", "points": "407 140"},
            {"id": "4", "fill": "#D9D9D9", "type": "path", "d": "L478.4,97.3"},
            {"id": "5", "fill": "#772BA9", "type": "path", "d": "L576.9,181.1"}
        ];

I know how to implement this:

<path *ngFor="let item of dataCell">{{item.type}} fill="{{item.fill}} id="{{item.id}}</path>

But how can I implement, depending on the type in the object, to insert a tag that is stored in dataCell[i].type?

<app-for-example *ngFor="let item of dataCell" [dataCell]="dataCell">
          <{{item.type}} [fill]="{{item.fill}}"></{{item.type}}>
        </app-for-example>

Answer 1

Use ngSwitch: https://angular.io/docs/ts/latest/api/common/index...

Answer 2

It must be something...

<app-for-example *ngFor="let item of dataCell" [dataCell]="dataCell" [ngSwitch]="item. type">
  <path *ngSwitchCase ="item.type == 'path'" attr.fill="{{item.fill}} attr.id="{{item.id}}></path>
  <polyline *ngSwitchCase ="item.type == 'polyline'" attr.fill="{{item.fill}} attr.id="{{item.id}}></polyline>
</app-for-example>