[Solved] Consider this component template:<section> <ng-content select=".header"></ng-content> <ng-content select=".... | Angular

Angular - Component Interaction

Consider this component template:

<section>
  <ng-content select=".header"></ng-content>
  <ng-content select=".body"></ng-content>
</section>

And this usage:

<my-section>
  <div class="header">Title</div>
  <div class="body">Content</div>
</my-section>

What will be rendered inside the <section> element?

AOnly <div class="header">Title</div> is rendered

B<div class="header">Title</div> followed by <div class="body">Content</div>

COnly <div class="body">Content</div> is rendered

DNo content is rendered inside <section>

Step-by-Step Solution

Solution:

Step 1: Understand select attribute usage
The select attribute matches elements with the specified class for projection.
Step 2: Match usage elements to selectors
The usage has elements with classes header and body, matching both selectors.
Step 3: Confirm projection order
Elements are projected in the order of ng-content tags in the template.
Final Answer:
Both <div class="header">Title</div> and <div class="body">Content</div> are rendered in order. -> Option B
Quick Check:
Matching classes project content in order [OK]

Quick Trick: Elements matching selectors project in template order [OK]

Common Mistakes:

Master "Component Interaction" in Angular

9 interactive learning modes - each teaches the same concept differently

More Angular Quizzes

Consider this component template: