[Solved] What is wrong with this code snippet? @ViewChild('myDiv') myDiv: ElementRef; ngOnInit() { console.log(this.myDiv.nativeElement.innerText); } | Angular

Angular - Component Interaction

What is wrong with this code snippet?

  @ViewChild('myDiv') myDiv: ElementRef;

  ngOnInit() {
    console.log(this.myDiv.nativeElement.innerText);
  }

AThe template variable name should not be a string

BMissing import for ElementRef

CAccessing @ViewChild in ngOnInit is too early; it is undefined

DThe property should be private

Step-by-Step Solution

Solution:

Step 1: Understand lifecycle timing for @ViewChild
@ViewChild references are set after the view initializes, so ngOnInit is too early to access them.
Step 2: Correct lifecycle hook to use
ngAfterViewInit is the correct place to access @ViewChild properties safely.
Final Answer:
Accessing @ViewChild in ngOnInit is too early; it is undefined -> Option C
Quick Check:
Use ngAfterViewInit to access @ViewChild [OK]

Quick Trick: Access @ViewChild only after view initialization (ngAfterViewInit) [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 code snippet?