Inter-Component Communication In Angular – ViewChild

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 :

Leave a Reply

Your email address will not be published. Required fields are marked *