# @ViewChild decorator

By

Paul Tomoiu

●

In 

Angular, 

frontend, 

web

●

Published 2024-01-06

This tutorial explains @ViewChild decorator in Angular.

In Angular, the @ViewChild decorator is used to access a child component, directive, or element from a parent component. This decorator allows the parent component to query the child component's properties, methods, or other details directly. @ViewChild is particularly useful when you need to interact with a specific child component or element within a parent component.

Here's a basic explanation of how @ViewChild works:

Before using @ViewChild, make sure to import the necessary modules. ViewChild is imported from @angular/core, and ElementRef is often used when dealing with native HTML elements.

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

Apply the @ViewChild decorator in the parent component, specifying the child component or element type. You can also use static: false to ensure that the query is resolved after the ngAfterViewInit lifecycle hook.

@Component({
  selector: 'app-parent',
  template: `
    <app-child></app-child>
  `,
})
export class ParentComponent {
  @ViewChild(ChildComponent) childComponent: ChildComponent;
  // Alternatively, use ElementRef for native elements
  // @ViewChild('myElement') myElement: ElementRef;

  ngAfterViewInit() {
    // Access child component properties or methods after view initialization
    console.log(this.childComponent.childProperty);
    this.childComponent.childMethod();
  }
}

In this example, @ViewChild(ChildComponent) is used to query the ChildComponent instance in the ParentComponent. The instance is then available in the childComponent property.

After the parent component's view has been initialized (using ngAfterViewInit), you can access the properties and methods of the child component.

@Component({
  selector: 'app-child',
  template: '<p>Child Component</p>',
})
export class ChildComponent {
  childProperty = 'Value from child';

  childMethod() {
    console.log('Method called in child component');
  }
}

In this example, the childProperty and childMethod of the ChildComponent are accessed from the ParentComponent.

If you want to query a native HTML element instead of a component, you can use ElementRef:

@ViewChild('myElement') myElement: ElementRef;

ngAfterViewInit() {
  // Access native element properties or methods after view initialization
  console.log(this.myElement.nativeElement.textContent);
}

In this example, @ViewChild('myElement') is used to query an element with the template reference variable #myElement. The native element is then accessed using this.myElement.nativeElement.

It's important to note that @ViewChild is primarily used for querying components or elements that are direct children of the current component. If you need to access components or elements nested deeper in the component hierarchy, you may consider using @ContentChild or a service for communication between components.