Angular: TypeError: Cannot read properties of undefined (reading 'nativeElement') — @ViewChild used in ngOnInit

Meaning

View queries are resolved after the view initialises. In ngOnInit they are undefined (unless { static: true } and the element is not inside a conditional). Use ngAfterViewInit, or afterNextRender, and remember elements inside @if exist only when the condition is true.

Common causes

• Using the query in ngOnInit or the constructor
• Element inside *ngIf / @if / @for so the query is empty until rendered
• Wrong template reference name (#canvas vs 'canvasRef')
• { static: true } on an element inside a conditional
• Component used before its view is created

Detailed fix by platform

Code examples

@ViewChild('canvas') canvas?: ElementRef<HTMLCanvasElement>;

ngAfterViewInit() {
  const el = this.canvas?.nativeElement;
  if (!el) return;                       // not rendered (e.g. inside an @if)
  el.getContext('2d')?.fillRect(0, 0, 10, 10);
}

How to diagnose

1. Hook — ngOnInit or ngAfterViewInit?
2. Condition — Element inside @if/ngIf?
3. Reference — Does #name match the query?

More related errors