Bird
0
0

How can you combine ng-content with Angular structural directives to conditionally display projected content in named slots?

hard📝 Application Q9 of 15
Angular - Component Interaction
How can you combine ng-content with Angular structural directives to conditionally display projected content in named slots?
AUse <code>ng-content</code> with <code>*ngFor</code> to filter content.
BAdd <code>*ngIf</code> directly on <code>ng-content</code> tags.
CUse <code><ng-container *ngIf="condition"><ng-content select=...></ng-content></ng-container></code>
DWrap projected content in <code><div *ngIf></code> inside the parent component.
Step-by-Step Solution
Solution:
  1. Step 1: Understand Angular structural directives usage

    Structural directives like *ngIf cannot be applied directly on ng-content because it is a placeholder, not an element.
  2. Step 2: Use ng-container to conditionally render slots

    Wrapping ng-content inside ng-container *ngIf="condition" conditionally shows the projected content.
  3. Final Answer:

    Wrap ng-content in ng-container with *ngIf to conditionally display content. -> Option C
  4. Quick Check:

    Use ng-container with *ngIf around ng-content = D [OK]
Quick Trick: Wrap ng-content in ng-container for *ngIf conditions [OK]
Common Mistakes:
  • Applying *ngIf directly on ng-content
  • Trying to filter projected content with *ngFor
  • Conditionally hiding content only in parent, not slots

Want More Practice?

15+ quiz questions · All difficulty levels · Free

Free Signup - Practice All Questions
More Angular Quizzes