angularangular2-ngcontent

conditional ng-content in angular 4/5

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.

Solution

  • 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.