Bird
0
0

Given this component code:

medium📝 component behavior Q13 of 15
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:
  1. Step 1: Understand content projection and @ContentChild

    The <p #proj> is projected inside <ng-content>. @ContentChild('proj') gets its reference.
  2. Step 2: ngAfterContentInit timing

    ngAfterContentInit runs after projected content is initialized, so projElement is defined and accessible.
  3. Final Answer:

    Hello World -> Option A
  4. 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

Want More Practice?

15+ quiz questions · All difficulty levels · Free

Free Signup - Practice All Questions
More Angular Quizzes