conditional ng-content in angular 4/5

Question

Hi I want some conditional implementation of ng-content e.g.

<div>
   <ng-content select="[card-icon]"></ng-content>
</div>
<div  #body>
   <div *ngIf="description.children.length;else newDiv">
      <ng-content select="[card-body]"></ng-content>
   </div>
   <div #newDiv>
      <ng-content select="[card-body]"></ng-content>
   </div>
</div>
<div  style="align-self: end;" #description [ngClass]="{'hide':!(description.children.length)}">
<ng-content select="[card-description]" ></ng-content>
</div>

but nothing is projected in the #newDiv. TIA.

score 42 · Accepted Answer · answered Nov 20 '17 at 07:20

You can use given snippet:

 <div *ngIf=description.children.length>
    <ng-container *ngTemplateOutlet="tempOutlet" ></ng-container>
 </div>
 <div *ngIf=!description.children.length>
    <ng-container *ngTemplateOutlet="tempOutlet" ></ng-container>
 </div>
 <ng-template #tempOutlet>
     <ng-content select="[card-body]"></ng-content>
 </ng-template>

Explanation: This is done because if you have multiple ng-content of same types (e.g. card-body, card-icon or blank) then the last ng-content in your template will be added to your HTML. So have a single ng-content and make it project into multiple positions using ng-template and template outlet.

not working for me and I have actually found an issue here https://stackoverflow.com/questions/51948301/using-ng-content-in-ng-template — Dzmitry Vasilevsky, Aug 16 '21 at 17:18

score 5 · Answer 2 · answered Nov 20 '17 at 06:38

5

Better make use of ng-template

   <div *ngIf="description.children.length;else newDiv">
      <ng-content select="[card-body]"></ng-content>
      <ng-container *ngTemplateOutlet="newDiv"></ng-container>
   </div>

   <ng-template #newDiv>
      <ng-content select="[card-body]"></ng-content>
   </ng-template>

answered Nov 20 '17 at 06:38

Rahul Singh

19,030
11
64
86

Why ? will you please explain ? – Vivek Doshi Nov 20 '17 at 06:41
@VivekDoshi this will clear your doubts i hope https://blog.angular-university.io/angular-ng-template-ng-container-ngtemplateoutlet/ – Rahul Singh Nov 20 '17 at 06:45
nothing happen @RahulSingh i think should be at single place only i.e. should not be duplicated – Mantu Nigam Nov 20 '17 at 07:00

conditional ng-content in angular 4/5

2 Answers2