How to Select an Element in an Angular Component Template: A Complete Guide with TypeScript

Why Doesn't document.querySelector Work in Angular?

Imagine: you are writing your first Angular application, and you need to access a regular <div> or <input> directly in the component template. Your first thought is to use the good old document.querySelector. But here's the problem: in the console — null or undefined. Sound familiar?

Angular is not just a library for DOM manipulation. It is a framework that works with its own abstraction over the real DOM. Direct access to elements through global selectors violates the framework's architecture, can lead to memory leaks and performance issues. But the main reason is that Angular uses a virtual DOM and Shadow DOM (depending on the encapsulation strategy), so your document.querySelector simply cannot see the elements inside the component.

Fortunately, Angular developers have provided an elegant solution — the ViewChild and ViewChildren decorators. In this article, we will break down how to properly select elements in a component template using TypeScript, and examine all the pitfalls.

Main Ways to Access Template Elements

In Angular, there are three main approaches to selecting elements in a component template:

\n
• Template Reference Variables — the simplest way for quick access
\n
• ViewChild Decorator — for accessing a single element or component
\n
• ViewChildren Decorator — for accessing a collection of similar elements
\n

Each of these approaches has its own features and is used in different scenarios. Let's look at them in detail.

1. Template Reference Variables: The Fastest Way

Template reference variables are a "life hack" from Angular that allows you to access a DOM element directly in the template, without needing to write code in the component class. You simply put #referenceName on the desired element.

// component.html\n<input #myInput type="text" placeholder="Enter text">\n<button (click)="focusInput(myInput)">Focus on input</button>

In this example, #myInput is a template reference variable. It automatically creates a variable that can be passed to component methods. Note: we are passing the element itself, not its value.

// component.ts\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-example',\n  templateUrl: './example.component.html'\n})\nexport class ExampleComponent {\n  focusInput(inputElement: HTMLInputElement): void {\n    inputElement.focus();\n    inputElement.style.borderColor = '#4CAF50';\n  }\n}

An important point: template reference variables are only accessible within the template. You cannot use them directly in the component class. For that, you need decorators.

2. ViewChild: Accessing a Single Element

The @ViewChild decorator is the main tool for gaining access to an element or child component from the component class. It works based on a selector: you can search by template reference variable, by component type, or by CSS selector (with limitations).

// component.ts\nimport { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';\n\n@Component({\n  selector: 'app-example',\n  template: `\n    <div #myDiv>This element we will select</div>\n    <p #myParagraph>And this one too</p>\n  `\n})\nexport class ExampleComponent implements AfterViewInit {\n  @ViewChild('myDiv') myDiv!: ElementRef;\n  @ViewChild('myParagraph') myParagraph!: ElementRef;\n\n  ngAfterViewInit(): void {\n    // Important! Access to elements is only possible after the view has been initialized\n    console.log(this.myDiv.nativeElement.textContent); // "This element we will select"\n    this.myPara