Mastering Angular DOM Manipulation: ViewChild and ViewChildren In-Depth Guide

As an Angular developer, there will be many occasions where you need to access or manipulate elements in the DOM from your component TypeScript code. Angular provides two powerful tools for querying the DOM: the ViewChild and ViewChildren decorators.

In this article, we‘ll take an in-depth look at how to use ViewChild and ViewChildren effectively in your Angular 8+ projects. I‘ll explain the difference between the two decorators and provide detailed examples of querying child components, directive, and plain DOM elements. We‘ll also touch on some best practices to keep in mind and explore the changes introduced in Angular 8 related to the static query option.

By the end of this guide, you‘ll be equipped to effectively leverage ViewChild and ViewChildren to build dynamic Angular applications that can manipulate the DOM with ease. Let‘s get started!

Understanding ViewChild and ViewChildren

Before we jump into examples, let‘s make sure we understand conceptually what ViewChild and ViewChildren are used for.

ViewChild and ViewChildren are both decorators that allow you to query the DOM in your component‘s template to locate elements, directives, or child components. They give you a way to get a reference to a DOM element or component instance that you can then interact with in your TypeScript code.

Here are the key differences:

• ViewChild is used to query for a single element, directive, or component. It returns the first matching element.
• ViewChildren queries for multiple elements, directives or components and returns a QueryList object.

Both decorators work by taking a selector argument to find the matching elements in the view DOM. This selector can be:

• The name of a template reference variable (e.g. #myElement)
• The type of a component or directive (e.g. MyComponent)
• A provider defined in the component‘s providers array

ViewChild and ViewChildren queries are only available once the component‘s view has been initialized. Therefore, to access the queried elements, you typically use them in combination with the AfterViewInit lifecycle hook, which is called after Angular has fully initialized the component‘s view.

With these core concepts in mind, let‘s look at some concrete examples of ViewChild and ViewChildren in action.

Querying a Single Child Component with ViewChild

A common use case for ViewChild is to get a reference to a child component instance so you can call its methods or access its properties.

Consider a simple example where we have a parent component (AppComponent) with a child component (HelloComponent):

// hello.component.ts
import { Component, Input } from ‘@angular/core‘;

@Component({
  selector: ‘app-hello‘,
  template: ``
})
export class HelloComponent {
  @Input() name: string;

  greet() {
    alert(‘Hello from HelloComponent!‘);
  }
}

In the parent component, we can query for the HelloComponent instance using ViewChild like this:

// app.component.ts
import { Component, ViewChild, AfterViewInit } from ‘@angular/core‘; 
import { HelloComponent } from ‘./hello.component‘;

@Component({
  selector: ‘app-root‘,
  template: `
    <app-hello name="Angular"></app-hello>
    <button (click)="sayHello()">Trigger Hello</button>
  `
})
export class AppComponent implements AfterViewInit {
  @ViewChild(HelloComponent) helloComponent: HelloComponent;

  ngAfterViewInit() {
    console.log(‘HelloComponent instance:‘, this.helloComponent);
  }

  sayHello() { 
    this.helloComponent.greet();
  }
}

Here‘s what‘s happening:

1. We import ViewChild and AfterViewInit from @angular/core and the HelloComponent type.

2. In the AppComponent class, we declare a property helloComponent and decorate it with @ViewChild(HelloComponent). This sets up a query for the HelloComponent instance.

3. In the ngAfterViewInit lifecycle hook, the helloComponent property will be populated with the HelloComponent instance, which we can log to the console.

4. We define a sayHello method that calls the greet method on the queried HelloComponent instance.

With this setup, clicking the "Trigger Hello" button will call the sayHello method, which in turn calls greet on the child HelloComponent, displaying an alert.

This is just a basic example, but it demonstrates the power of ViewChild for interacting with child components. You can use it to call methods, access properties, or even modify the child component‘s DOM.

Querying the DOM with Template Reference Variables

In addition to querying child components, ViewChild can also be used to query native DOM elements in your templates using template reference variables.

Template reference variables are a way to give an identifier to an element in your template so you can reference it elsewhere. They are defined using the hash syntax, like this:

<div #myDiv>Hello!</div>

You can then use ViewChild to query for that element in your component class:

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

@Component({
  selector: ‘app-root‘,
  template: `
    <div #myDiv>Hello!</div>
    <button (click)="changeColor()">Change Color</button>
  `
})
export class AppComponent implements AfterViewInit {
  @ViewChild(‘myDiv‘) myDiv: ElementRef<HTMLDivElement>;

  ngAfterViewInit() {
    console.log(‘Div element:‘, this.myDiv.nativeElement);
  }

  changeColor() {
    this.myDiv.nativeElement.style.color = ‘blue‘;
  }
}

In this example:

1. We define a template reference variable #myDiv on the

   element.

2. In the component class, we declare a property myDiv and use @ViewChild(‘myDiv‘) to query for the element with the matching template reference.

3. The myDiv property is of type ElementRef, which is a wrapper around a native element. We can access the underlying DOM element using the nativeElement property.

4. In the changeColor method, we modify the color style of the queried

   element.

With this setup, clicking the "Change Color" button will turn the text color of the

// app.component.ts
import { Component, ViewChildren, QueryList, AfterViewInit } from ‘@angular/core‘;
import { ChildComponent } from ‘./child.component‘;

@Component({
  selector: ‘app-root‘,
  template: `
    <app-child></app-child>
    <app-child></app-child>
    <app-child></app-child>
  `
})
export class AppComponent implements AfterViewInit {
  @ViewChildren(ChildComponent) childComponents: QueryList<ChildComponent>;

  ngAfterViewInit() {
    console.log(‘Child components:‘, this.childComponents);
    this.childComponents.forEach((child, index) => {
      console.log(`Child ${index}:`, child);
      child.doSomething();
    });
  }
}