Bird
0
0

Consider this component template:

medium📝 component behavior Q4 of 15
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:
  1. Step 1: Understand select attribute usage

    The select attribute matches elements with the specified class for projection.
  2. Step 2: Match usage elements to selectors

    The usage has elements with classes header and body, matching both selectors.
  3. Step 3: Confirm projection order

    Elements are projected in the order of ng-content tags in the template.
  4. Final Answer:

    Both <div class="header">Title</div> and <div class="body">Content</div> are rendered in order. -> Option B
  5. Quick Check:

    Matching classes project content in order [OK]
Quick Trick: Elements matching selectors project in template order [OK]
Common Mistakes:
  • Assuming only one slot projects content
  • Confusing class selectors with tag selectors
  • Thinking content is not projected without default slot

Want More Practice?

15+ quiz questions · All difficulty levels · Free

Free Signup - Practice All Questions
More Angular Quizzes