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 tappable>
        <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?

Answer 1

I would use ngTemplateOutlet instead of render option:

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

See also

• https://angular.io/api/common/NgTemplateOutlet#how-to-use