[Solved] What is wrong with this component template?<div> <ng-content select="header"></ng-content> <ng-content select=".... | Angular

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:

Step 1: Analyze the select attribute usage
The first ng-content uses select="header", which looks for elements named <header>, not class header.
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.
Final Answer:
The selector 'header' misses the dot for class, so no content projects there -> Option C
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:

Master "Component Interaction" in Angular

9 interactive learning modes - each teaches the same concept differently

More Angular Quizzes

What is wrong with this component template?