How to use multiple ng-content in the same component in Angular 2?
20,241
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>
See also
Author by
Steffi
Updated on July 08, 2022Comments
-
Steffi almost 2 years
I would like to display different template in my component. Only one will show. If
hasURL
istrue
, I want to show the<a></a>
. IfhasURL
isfalse
, I want to show the<button></button>
.The problem if hasURL is false, the component show button, but the ng-content is empty. Because it's already read in the first "
a></a>
Is there a way to solve that please?
<a class="bouton" href="{{ href }}" *ngIf="hasURL"> <ng-content> </ng-content> </a> <button class="bouton" *ngIf="!hasURL"> <ng-content> </ng-content> </button>