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 <a></a>. If hasURL is false, 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>

yurzui · Accepted Answer · 2020-03-04T11:26:11.437

123

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

edited Mar 04 '20 at 11:26

answered Jun 22 '17 at 12:38

yurzui

205,937
32
433
399

Thanks! It works great. I'm still with Angular 2 not Angular 4, so I had to use ` – Steffi Jun 22 '17 at 12:59
@dude Can you check this https://ng-run.com/edit/N7cnnC9HCm1cKlE88QFp? – yurzui Mar 04 '20 at 11:26
4

My mistake, it actually seems to work, but you can not output ng-content twice, only when wrapping it in *ngIf as mentioned here, sorry. – dude Mar 04 '20 at 11:29
1

Why can't we use in multiple templates? – ayed abboushi Jan 16 '22 at 21:31
Note: using `` and ``. Both should be in their own ``. – Get Off My Lawn Nov 15 '22 at 19:06

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

1 Answers1

Linked