16

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.

Improve this question

2 Answers 2

Reset to default
43

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

not working for me and I have actually found an issue here stackoverflow.com/questions/51948301/…
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>
Improve this answer

3 Comments

Why ? will you please explain ?
@VivekDoshi this will clear your doubts i hope blog.angular-university.io/…
nothing happen @RahulSingh i think <ng-content select="[card-body]"></ng-content> should be at single place only i.e. should not be duplicated

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.