[Solved] Why does this component fail to project content?Component template: <div> <ng-content select=".main"></ng-content> </div> Usage: <my-comp> <p class="content">Hello</p> </my-comp> | Angular

Angular - Component Interaction

Why does this component fail to project content?

Component template:
<div>
  <ng-content select=".main"></ng-content>
</div>

Usage:
<my-comp>
  <p class="content">Hello</p>
</my-comp>

Ang-content requires an id selector, not class.

BContent projection only works with <span> tags.

CThe projected element's class does not match the select attribute.

DThe component template must have multiple ng-content tags.

Step-by-Step Solution

Solution:

Step 1: Compare select attribute and projected content
The template selects elements with class 'main', but usage provides class 'content'.
Step 2: Understand projection matching
Content only projects if selector matches; here it does not, so nothing appears.
Final Answer:
The projected element's class does not match the select attribute. -> Option C
Quick Check:
Selector mismatch blocks projection = B [OK]

Quick Trick: Selector must match projected element's class exactly [OK]

Common Mistakes:

Master "Component Interaction" in Angular

9 interactive learning modes - each teaches the same concept differently

More Angular Quizzes

Why does this component fail to project content?