@ViewChild in Angular | get data, methods, elements from child components | Angular 15+

In Angular, @ViewChild is a decorator that allows a component to access a child component or element in the template. It is used to obtain a reference to a child component, element or directive from a parent component.

This can be useful when you want to perform some actions or get data from child components or elements without relying on event emitters or other mechanisms. Here's a step-by-step explanation of using @ViewChild:

The @ViewChild decorator takes one or two arguments. The first argument is the selector of the child element, component, or directive that you want to access. The second argument is an options object that specifies whether to query for the first matching element or all matching elements.

• When used with a component or directive, @ViewChild returns an instance of the child component or directive.
• When used with a DOM element, @ViewChild returns an instance of the ElementRef class, which provides access to the underlying native DOM element.

Here is an example of using @ViewChild to access a child component in Angular:

Step 1: Import ViewChild and ElementRef
First, import the ViewChild decorator and ElementRef class (if you need to access a DOM element) in your parent component. Add the following lines at the top of your parent component's TypeScript file:

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

Step 2: Add the ViewChild decorator in the parent component
In the parent component, add the ViewChild decorator and specify the selector or the type of the child component, directive, or element you want to access. Then, create a property to hold the reference. For example:

// parent.component.ts
import { ViewChild } from '@angular/core';
import { ChildComponent } from './child.component';
@Component({...})
export class ParentComponent {
  @ViewChild(ChildComponent) childComponent: ChildComponent;
}

Step 3: Use the ViewChild reference
Now you can use the ViewChild reference to access properties or methods in the child component. However, you should wait until the ngAfterViewInit lifecycle hook to access the ViewChild reference, as the child component may not be available before that.

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

@Component({...})
export class ParentComponent implements AfterViewInit {
  @ViewChild(ChildComponent) childComponent: ChildComponent;

  ngAfterViewInit() {
    // Now you can access the child component's properties and methods
    console.log(this.childComponent);
  }
}

Step 4: Access DOM elements with ElementRef of parent
If you want to access a DOM element directly, use ElementRef. First, add a template reference variable in your parent component's template:

<!-- parent.component.html -->
<input #inputElement type="text" />

// parent.component.ts
import { ViewChild, ElementRef } from '@angular/core';

@Component({...})
export class ParentComponent implements AfterViewInit {
  @ViewChild('inputElement') inputElement: ElementRef;

  ngAfterViewInit() {
    // Access the native DOM element
    console.log(this.inputElement.nativeElement);
  }
}

To access element of child component

1.add element in child component

<!-- child.component.html -->
<div #childElement>Hello from ChildComponent</div>

2.Expose the ElementRef in the child component

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

@Component({
  ////
})
export class ChildComponent {
  @ViewChild('childElement') childElement: ElementRef;
}

3.Use the ViewChild decorator in the parent component

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

@Component({...})
export class ParentComponent implements AfterViewInit {
  @ViewChild(ChildComponent) childComponent: ChildComponent;

  ngAfterViewInit() {
    // Access the child component's ElementRef
    console.log(this.childComponent.childElement.nativeElement);
  }
}

Here you can access child component elements