How Do I render an ng-container or ng-template without *ngIf?

Question

I need to add the tappable directive to the ion-card component inside a custom component. I use an @Input() myInputBool, something like:

<ng-container *ngIf="myInputBool">
    <ion-card>
        <ng-container render="myContent"></ng-container>
    </ion-card>
</ng-container>

<ng-container *ngIf="!myInputBool">
    <ion-card tappable>
        <ng-container render="myContent"></ng-container>
    </ion-card>
</ng-container>

<ng-container #myContent>
    This is my content
</ng-container>

Of course it does not work because there are no "render" option. So far my workaround was adding an inexistent variable in the ng-container

<ng-container *ngIf="thisVariableDoesNotExist else myContent"> </ng-container>

But it feels bad and hacky. Is there a better way to this?

why do you use want to pass `myContent` to `render` to `ng-container`? — Max Koretskyi, Aug 01 '17 at 09:45
@Maximus I just want to use `#myContent` in both cases without repeating all the code. — distante, Aug 01 '17 at 11:05

score 55 · Accepted Answer · answered Aug 01 '17 at 11:09

55

I would use ngTemplateOutlet instead of render option:

<ng-container *ngTemplateOutlet="myContent"></ng-container>

How Do I render an ng-container or ng-template without *ngIf?

1 Answers1