DEV Community

Cover image for Mastering Parent-Child Communication in Angular: Invoking Child Methods
Shaikh AJ
Shaikh AJ

Posted on

Mastering Parent-Child Communication in Angular: Invoking Child Methods

In this article, we will delve into the intricacies of invoking a function defined in a child component from a parent component in Angular. This is a common requirement in many Angular applications, especially when we need to maintain a clean separation of concerns while enabling robust inter-component communication.

Table of Contents

  1. Introduction
  2. Prerequisites
  3. Understanding Angular Component Interaction
  4. Setting Up the Angular Project
  5. Creating Parent and Child Components
  6. Using @ViewChild to Access Child Component
  7. Invoking the Child Component's Function
  8. Full Example Code
  9. Conclusion

1. Introduction

Angular, a powerful framework for building dynamic web applications, provides various ways to enable interaction between components. One essential pattern is calling a function in a child component from its parent. This article will walk you through the steps required to achieve this, with a practical example to illustrate the concepts.

2. Prerequisites

Before we dive into the example, ensure you have the following:

  • Basic understanding of Angular components and services
  • Angular CLI installed on your machine
  • A working Angular project setup

3. Understanding Angular Component Interaction

In Angular, components often need to communicate with each other. The parent-child relationship is common, where the parent component can pass data to the child component and vice versa. However, calling methods directly across this boundary requires a different approach, typically involving Angular's @ViewChild decorator.

4. Setting Up the Angular Project

Start by creating a new Angular project if you don't have one already:

ng new parentChildInteraction
cd parentChildInteraction
Enter fullscreen mode Exit fullscreen mode

5. Creating Parent and Child Components

Generate the parent and child components using Angular CLI:

ng generate component parent
ng generate component child
Enter fullscreen mode Exit fullscreen mode

6. Using @ViewChild to Access Child Component

The @ViewChild decorator is crucial for this task. It allows the parent component to access the child component's properties and methods.

  1. Parent Component (parent.component.ts): Update the parent component to use @ViewChild:
   import { Component, ViewChild } from '@angular/core';
   import { ChildComponent } from '../child/child.component';

   @Component({
     selector: 'app-parent',
     templateUrl: './parent.component.html',
     styleUrls: ['./parent.component.css']
   })
   export class ParentComponent {
     @ViewChild(ChildComponent) childComponent!: ChildComponent;

     triggerChildFunction() {
       this.childComponent.childFunction();
     }
   }
Enter fullscreen mode Exit fullscreen mode
  1. Child Component (child.component.ts): Define the function in the child component:
   import { Component } from '@angular/core';

   @Component({
     selector: 'app-child',
     templateUrl: './child.component.html',
     styleUrls: ['./child.component.css']
   })
   export class ChildComponent {
     childFunction() {
       console.log('Child function called!');
     }
   }
Enter fullscreen mode Exit fullscreen mode

7. Invoking the Child Component's Function

Modify the parent component template to include a button that triggers the function in the child component:

Parent Component Template (parent.component.html):

<div>
  <h2>Parent Component</h2>
  <button (click)="triggerChildFunction()">Call Child Function</button>
  <app-child></app-child>
</div>
Enter fullscreen mode Exit fullscreen mode

8. Full Example Code

Parent Component (parent.component.ts):

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

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {
  @ViewChild(ChildComponent) childComponent!: ChildComponent;

  triggerChildFunction() {
    this.childComponent.childFunction();
  }
}
Enter fullscreen mode Exit fullscreen mode

Parent Component Template (parent.component.html):

<div>
  <h2>Parent Component</h2>
  <button (click)="triggerChildFunction()">Call Child Function</button>
  <app-child></app-child>
</div>
Enter fullscreen mode Exit fullscreen mode

Child Component (child.component.ts):

import { Component } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent {
  childFunction() {
    console.log('Child function called!');
  }
}
Enter fullscreen mode Exit fullscreen mode

Child Component Template (child.component.html):

<div>
  <h3>Child Component</h3>
</div>
Enter fullscreen mode Exit fullscreen mode

9. Conclusion

By following this guide, you should now be able to call a function in a child component from a parent component in Angular. This pattern helps in building a more modular and maintainable codebase by clearly defining the interactions between components.


Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay