How To Use ViewChild in Angular to Access a Child Component, Directive, or DOM Element

Step 1: Import ViewChild and the Child Component, Directive, or DOM Element

First, you need to import the ViewChild decorator and the Child Component, Directive, or DOM Element you want to access. You can do this by adding the following code to your component:

import { Component, ViewChild, ElementRef } from '@angular/core';
import { ChildComponent } from './child.component';
import { MyDirective } from './my.directive';

In this example, we're importing ViewChild, ElementRef, a Child Component called ChildComponent, and a Directive called MyDirective.

Step 2: Use ViewChild to Access the Child Component, Directive, or DOM Element

Next, you need to use ViewChild to access the Child Component, Directive, or DOM Element. You can do this by adding the following code to your component:

@ViewChild(ChildComponent) childComponent: ChildComponent;
@ViewChild(MyDirective) myDirective: MyDirective;
@ViewChild('myElement') myElement: ElementRef;

In this example, we're using ViewChild to access a Child Component called ChildComponent, a Directive called MyDirective, and a DOM Element with the ID of 'myElement'.

Step 3: Access the Child Component, Directive, or DOM Element

Finally, you can access the Child Component, Directive, or DOM Element by using the ViewChild properties you created in Step 2. You can do this by adding the following code to your component:

ngAfterViewInit() {
  console.log(this.childComponent);
  console.log(this.myDirective);
  console.log(this.myElement);
}

In this example, we're accessing the Child Component, Directive, and DOM Element in the ngAfterViewInit lifecycle hook.

Keywords: Angular, ViewChild, Child Component, Directive, DOM Element, ElementRef, lifecycle hook.