[Solved] Given this component code:@Component({ selector: 'child-comp', template:... } }And usage:Hello WorldWhat will be logged to the console? | Angular

Angular - Component Interaction

Given this component code:

@Component({ selector: 'child-comp', template: `` })
export class ChildComp {
  @ContentChild('proj') projElement!: ElementRef;

  ngAfterContentInit() {
    console.log(this.projElement.nativeElement.textContent);
  }
}

And usage:

Hello World

What will be logged to the console?

AHello World

Bundefined

CError: projElement is undefined

DEmpty string

Step-by-Step Solution

Solution:

Step 1: Understand content projection and @ContentChild
The <p #proj> is projected inside <ng-content>. @ContentChild('proj') gets its reference.
Step 2: ngAfterContentInit timing
ngAfterContentInit runs after projected content is initialized, so projElement is defined and accessible.
Final Answer:
Hello World -> Option A
Quick Check:
Projected element text logged correctly [OK]

Quick Trick: Use ngAfterContentInit to access projected content safely [OK]

Common Mistakes:

Trying to access projElement before ngAfterContentInit
Assuming @ContentChild does not find projected elements
Confusing @ViewChild with @ContentChild

Master "Component Interaction" in Angular

9 interactive learning modes - each teaches the same concept differently

Learn Why Deep Visual Try Challenge Project Recall Perf

More Angular Quizzes

Given this component code:

Step 1: Understand content projection and @ContentChild

Step 2: ngAfterContentInit timing

Final Answer:

Quick Check:

Want More Practice?