Angular2: how to iterate through templates

Question

So I got these components, classes B and C with different template, as seen below.

@Component({})
export abstract class A {}

@Component({
    template: `BBBBBB`
})
export class B extends A{}

@Component({
    template: `CCCCCC`
})
export class C extends A{}

In my main component I need to iterate trough an array of A, and insert its template to the HTML.

@Component({
    template: `
    <div>
    ...???...
    </div>
    `
})

export class MrModul {
    anArray: A[] = Array();
    constructor(){
        ...
        //filling up the Array
        ...
    }
}

So I need to fill the place with the '???' with the appropriate template, while i'm iterating through the array, but I don't really know how. If I use selectors I don't really know what selector to use. But if I use *ngFor i don't know what attribute I should use.
Can you guys help me? Thx!

Bonus info: The goal is to have someting like a widget system. You can choose and add a random type of - lets call it - widget, and they will be put into a new div. This what the array is for, to store the new widget.

What data does the array contain? Depending on what information do you want to display what component? — Günter Zöchbauer, Mar 06 '17 at 10:42
I agree with Günter. We need more information about your array — yurzui, Mar 06 '17 at 10:44
The aray contains B or C . So I want the component itself, for example B can mean an image, C can be a graph etc etc... and these need seperate templates — HPeter, Mar 06 '17 at 12:02

score 1 · Accepted Answer · answered Mar 06 '17 at 10:43

1

<ng-content *ngFor="let item of anArray">
  <my-a *ngIf="item.compo == 'a'></my-a>
  <my-b *ngIf="item.compo == 'b'></my-b>
  <my-c *ngIf="item.compo == 'c'></my-b>
</ng-content>

answered Mar 06 '17 at 10:43

Günter Zöchbauer

623,577
216
2,003
1,567

I need a little more flexible thing, I don't really know how many types are going to be, but I'd like to avoid writing a lot of seperate if-s – HPeter Mar 06 '17 at 13:10
Would be great if you could put that additional info into your question. A more flexible approach is http://stackoverflow.com/questions/36325212/angular-2-dynamic-tabs-with-user-click-chosen-components/36325468#36325468 – Günter Zöchbauer Mar 06 '17 at 13:14
I'll mark this as the answer, cause I made the solution based on this answer. I just wrote a wrapper component and then used ngSwitch. Thx! – HPeter Mar 08 '17 at 14:15

Angular2: how to iterate through templates

1 Answers1