Cannot use *ngFor or *ngIf inside of <ng-content> inside of react components

[MikaelLambert]

Hello, and great library by the way! I've successfully created wrappers for my react components, but now I'm trying to generate a list of components with *ngFor which I can't seem to get working. If needed, I can make a plunker or other sample app; just let me know, thanks.

Example from /angular-react/blob/master/apps/demo/src/app/app.component.html

This doesn't work:

<fab-pivot>
    <fab-pivot-item *ngFor="let item of items" headerText="item.name">
         <div>{{item.content}}</div>
    </fab-pivot-item>
</fab-pivot>

This doesn't work:

<fab-pivot>
    <div *ngFor="let item of items">
        <fab-pivot-item headerText="item.name"> <div>{{item.content}}</div> </fab-pivot-item>
    </div>
</fab-pivot>

This works:

<fab-pivot>
    <fab-pivot-item headerText="Tab 1"> <div>Tab 1's content</div> </fab-pivot-item>
    <fab-pivot-item headerText="Tab 2"> <div>Tab 2's content</div> </fab-pivot-item>
    <fab-pivot-item headerText="Tab 3"> <div>Tab 3's content</div> </fab-pivot-item>
</fab-pivot>

[boazrymland]

I have exactly the same issue :\

[justin-tufte]

If the component allows it, you can get around the *ngFor issue by wrapping your list of items in a component of their own. I ran into this issue testing the fab-dialog, it would not render anything using *ngFor, but putting the *ngFor inside another component worked just fine. Not ideal but it seems to be a possible work around.