Call Parent Method From Child Component And Child Method From Parent Component

Gajendra Jangid
3y
49.8k
0
3

Article

Introduction

In this article, I will discuss how to call child component method from parent component and parent component method from child component. For this article, I have created a demo project using Angular 12. In this demo project, I will create a simple parent and child component and I will demonstrate to call both methods vice versa.

Prerequisite

Angular 12

HTML

First of all, we have created a project using the following command in the Command Prompt.

ng new myApp

Open project in visual code studio using following command

> cd myApp
> Code .

Call Child Component method from Parent Component

We can use Viewchild to call Child Component method from Parent Component

Viewchild

A ViewChild is a decorator which is used when we want to access a child component inside the parent component, we use the decorator @ViewChild() in Angular.

Here I have declared a variable name child as decorator @ViewChild(). As shown below we can access childMethod of child component inside the parent component.

Use following code for parent component

@ViewChild(ChildComponent ) child !:any ;

callChildMethod() {
   this.child.childMethod("Hello Dear, Parent Method is Called")
 }

Use following code for child component

childMethod(msg: string) {
  this.childmsg=msg;
}

Call Parent Component method from Child Component

For Calling Parent Component method from Child Component, I had created a method getParentMethod and in this method, I had set input property in HTML file of parent component. Then shown as below code inside the child component I am able to access parent method.

Use following code for parent component

getParentMethod():any {
   return {
     callParentMethod: (name:any) => {
       this.parentMethod(name)
     }
   }
 }

 parentMethod(name: string) {
   this.parentMsg=name;
 }

Use following code for child component

@Input() parentApi !: any;

callParent() {
  this.parentApi.callParentMethod("Hello Dear, Child Method is Called")
}

App.component.html

<button (click)="callChildMethod()">call child</button>
<p>{{parentMsg}}</p>
<hr/>
<app-child [_pData]="getParentMethod()"></app-child>

App.component.ts

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

@Component({
  selector: 'app-root',
  styleUrls: ['./app.component.css'],
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  parentMsg='';
  @ViewChild(ChildComponent ) child !:any ;

  ngOnInit(): void {
  }

  constructor() { }

  getParentMethod():any {
    return {
      callParentMethod: (name:any) => {
        this.parentMethod(name)
      }
    }
  }

  parentMethod(name: string) {
    this.parentMsg=name;
  }

  callChildMethod() {
    this.child.childMethod("Hello Dear, Parent Method is Called")
  }
}

child.component.html

<button (click)="callParent()">call parent</button>
<p>{{childmsg}}</p>

child.component.ts

import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: 'child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent {

  @Input() _pData !: any;
  childmsg='';

  constructor() { }

  callParent() {
    this._pData.callParentMethod("Hello Dear, Child Method is Called")
  }

  childMethod(msg: string) {
    this.childmsg=msg;
  }
}