Template reference for direct access in Angular - Performance & Optimization

Performance: Template reference for direct access

MEDIUM IMPACT

This affects interaction speed and rendering efficiency by reducing the need for extra DOM queries or component lookups.

Accessing a DOM element or component instance directly in the template

Angular

<input #inputRef />
<button (click)="inputRef.focus()">Focus Input</button>

Directly accessing the element via template reference avoids Angular lifecycle overhead and extra DOM queries.

📈 Performance GainImproves INP by reducing event handling delay and avoids extra change detection cycles.

Accessing a DOM element or component instance directly in the template

Angular

import { ElementRef, ViewChild, Component } from '@angular/core';

@Component({ selector: 'app-example', template: `<input #inputRef />` })
export class ExampleComponent {
  @ViewChild('inputRef') inputElement!: ElementRef;

  focusInput() {
    this.inputElement.nativeElement.focus();
  }
}

Using @ViewChild triggers Angular's component lifecycle and change detection to find the element, adding overhead and delaying interaction.

📉 Performance CostTriggers extra change detection cycles and delays input responsiveness (INP) by several milliseconds.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
@ViewChild querying	Extra DOM query during lifecycle	0-1 reflows depending on usage	Minimal paint cost	[!] OK but slower
Template reference direct access	No extra DOM query, direct reference	0 reflows	Minimal paint cost	[OK] Good

Rendering Pipeline

Template references allow direct access to DOM elements or component instances without Angular's ViewChild querying, reducing the work in the rendering pipeline.

→DOM Access

→Event Handling

→Change Detection

⚠️ BottleneckChange Detection triggered by @ViewChild queries

Core Web Vital Affected

INP

This affects interaction speed and rendering efficiency by reducing the need for extra DOM queries or component lookups.

Optimization Tips

1Use template references for direct DOM or component access to reduce Angular lifecycle overhead.

2Avoid @ViewChild for simple element access to improve input responsiveness (INP).

3Check performance in DevTools to confirm reduced change detection and event handling delays.

Performance Quiz - 3 Questions

What is the main performance benefit of using a template reference variable over @ViewChild in Angular?

A It reduces the bundle size significantly.

B It avoids Angular's extra DOM querying and change detection overhead.

C It improves CSS selector matching speed.

D It prevents layout shifts during rendering.

DevTools: Performance

How to check: Record a performance profile while interacting with the element accessed via @ViewChild vs template reference. Look for change detection and event handling duration.

What to look for: Lower event handling and change detection time indicates better performance with template references.