Bird
0
0

What is wrong with this component template?

medium📝 Debug Q14 of 15
Angular - Component Interaction
What is wrong with this component template?
<div>
  <ng-content select="header"></ng-content>
  <ng-content select=".body"></ng-content>
</div>

Usage:
<my-comp>
  <div class="header">Top</div>
  <div class="body">Content</div>
</my-comp>
AThe usage classes do not match the template selectors
BThe select attribute cannot use class selectors
CThe selector 'header' misses the dot for class, so no content projects there
Dng-content must have a closing tag with content inside
Step-by-Step Solution
Solution:
  1. Step 1: Analyze the select attribute usage

    The first ng-content uses select="header", which looks for elements named <header>, not class header.
  2. Step 2: Compare with usage classes

    The usage provides <div class="header">, which does not match the selector header (element selector). It should be .header to match the class.
  3. Final Answer:

    The selector 'header' misses the dot for class, so no content projects there -> Option C
  4. Quick Check:

    Class selectors need dot prefix in select [OK]
Quick Trick: Class selectors in select need a dot prefix (e.g., .header) [OK]
Common Mistakes:
  • Using element name instead of class selector
  • Thinking select cannot use class selectors
  • Forgetting ng-content can be self-closing

Want More Practice?

15+ quiz questions · All difficulty levels · Free

Free Signup - Practice All Questions
More Angular Quizzes