How to use multiple ng-content in the same component in Angular 2?

Question

I would like to display different template in my component. Only one will show. If hasURL is true, I want to show the

Answer 1

You can wrap ng-content in ng-template and use ngTemplateOutlet

<a class="bouton" href="{{ href }}" *ngIf="hasURL">
    <ng-container *ngTemplateOutlet="contentTpl"></ng-container>
</a>

<button class="bouton" *ngIf="!hasURL">
    <ng-container *ngTemplateOutlet="contentTpl"></ng-container> 
</button>
<ng-template #contentTpl><ng-content></ng-content></ng-template>

Plunker Example

See also

• How to conditionally wrap a div around ng-content

Angular 9 demo