This article is part of a series on Inter-Component Communication in Angular. While you can start anywhere, it’s always best to start at the beginning right!

Part 1 – Input Binding
Part 2 – Output Binding
Part 3 – Joining Service
Part 4 – ViewChild

We’re now onto our final method of communicating between components in Angular. And this is one that I wasn’t sure if I should really write up. You see, using ViewChild to get components talking to each other, in my opinion, is the last resort. It isn’t that reactive and often runs into various race conditions because you aren’t using things like EventEmitters and data binding, and instead you are resorting to call methods directly.

For the above reasons, I’m going to make this short and sweet because for the most part, you won’t be using ViewChild to communicate between components, but it’s still good to know it’s an option.

Calling A Method Via ViewChild

Imagine I have my AppComponent like so :

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @ViewChild(ChildComponent, {static : false}) childComponent : ChildComponent;

  runChild() {
    this.childComponent.run();
  }
}

That also has HTML like so :

<button (click)="runChild()">Click Me</button>
<app-child></app-child>

We now have an AppComponent, with a button that when clicked, will “run” our child component.

Also notice that we use the @ViewChild() directive to find the ChildComponent in our HTML. There are a few different ways to do this, for example you can use the #name format in your HTML and then use that name to find the child, but the important thing here is that we can use @ViewChild() to essentially find child elements within the html and get a reference to them.

Our ChildComponent looks like so :

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent {
  run() {
    //Maybe a bunch of logic here. And then we set a message. 
    console.log("Run Successfully!" );
  }
}

Nothing too fancy. Upon running this solution, when we click the button in our AppComponent, it calls the run method of our ChildComponent, and everything is great! So, the first thing to get into is..

Where Should You Use ViewChild

ViewChild in my opinion has a very discrete use case. When you need to call a specific method within a child component *and* you would like to subscribe to it (Or await a promise from it). It can allow you to do sync calls to a child component, and actually wait till it’s done before being completed.

Where you shouldn’t use ViewChild is :

• Simply setting a property on a child component – Use Input Binding instead
• Broadcasting a value to multiple child components – Use Input Binding instead *or* a Joining Service
• Setting a value that a child component should then act on – Use Input Binding instead with a setter that calls an internal method
• Passing values out of a child component – Use Output Binding instead

👋 Hey, I'm Wade

Wade is a full-stack developer that loves writing and explaining complex topics. He is an expert in Angular JS and was the owner of tutorialsforangular.com which was acquired by Upmostly in July 2022.