0

In my Angular 2 project I have an array of objects of following shape:

let blocks = [
  {'type':'app-component-type-1',data:{}},
  {'type':'app-component-type-2',data:{}}
]

I'm walking this array via standard *ngFor:

<div *ngFor="let block of blocks">

And then my problem comes: I am passing block.data to a child component, which has selector matching the value of block.type. I am currently doing it via [ngSwitch] as follows:

<div [ngSwitch]="block.type">
  <app-component-type-1 *ngSwitchCase="'app-component-type-1'" [data]="block.data"></app-component-type-1>
  <app-component-type-2 *ngSwitchCase="'app-component-type-2'" [data]="block.data"></app-component-type-2>
</div>

I think it's a bad approach, but I didn't find any way how to specify a child component's tag/selector through a variable value - something like:

<template [child-component-selector]="block.type" [data]="block.data"></template>

Is this somehow possible?

Jan Klan
  • 667
  • 6
  • 16
  • That's what `ngSwitchCase` is for. An alternative is http://stackoverflow.com/questions/36325212/angular-2-dynamic-tabs-with-user-click-chosen-components/36325468#36325468 – Günter Zöchbauer Nov 23 '16 at 05:47
  • It seems silly - I will have dozens of component types which will have the same I/O interface and the only difference will be their selector. – Jan Klan Nov 23 '16 at 22:11

0 Answers0