What is the purpose of ViewChild and ViewChildren decorators in Angular? — Angular Interview Question #35

‘ViewChild‘ and ‘ViewChildren‘ are decorators in Angular that allow you to access child components, directives, or DOM elements within a parent component’s template. These decorators create a strong connection between the parent and child elements, making it possible to interact with or manipulate the child elements from the parent.

1. ‘ViewChild‘: The ‘ViewChild‘ decorator lets a parent component access a single child component, directive or a DOM element. It returns the first matching element if there are multiple instances of that element. Here’s a basic example of how you can use ‘ViewChild‘:

// app.component.html
<app-child-component #childComponent></app-child-component>

---
// app.component.ts
import {Component, ViewChild} from '@angular/core';
import {ChildComponent} from './child.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  @ViewChild('childComponent')
  childComponent!: ChildComponent;

  someFunction() {
    this.childComponent.methodInChildComponent();
  }
}

In this example, ‘#childComponent‘ creates a local reference for the child component in the template, and ‘@ViewChild(’childComponent’)‘ in the parent component’s TypeScript file creates a property that holds a reference to the child component. The parent can then call methods within the child component, like ‘methodInChildComponent()‘ in this case.

2. ‘ViewChildren‘: The ‘ViewChildren‘ decorator is used when a parent component wants to access multiple child components, directives, or DOM elements. It provides a ‘QueryList‘ with all the matching elements. Here’s an example of how to use ‘ViewChildren‘:

// app.component.html
<app-child-component *ngFor="let item of items" #childComponents></app-child-component>

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements AfterViewInit {
  @ViewChildren('childComponents')
  childComponents!: QueryList<ChildComponent>;

  ngAfterViewInit() {
    this.childComponents.forEach((child) => {
      child.methodInChildComponent();
    });
  }
}

In this example, we have multiple ‘<app-child-component>‘ elements, and we want to access all of them in the parent component. To do so, we create a ‘#childComponents‘ local reference, and use ‘@ViewChildren(’childComponents’)‘ in the parent’s TypeScript file. This will return a ‘QueryList‘ of child components, and we can loop through them and call their methods as needed.

In conclusion, ‘ViewChild‘ and ‘ViewChildren‘ decorators help establish a connection between parent and child elements in Angular, allowing the parent component to access properties or methods of its child components, directives, or DOM elements. These decorators make it easier to manage complex relationships and interactions between components, ensuring the smooth flow of data and efficient manipulation of the DOM.