How to call child component method from parent in Angular

In this article, We learn how to call child component method from parent in Angular. I will show how to do it, and just follow the steps clearly.

For more updates please do Subscribe via Email:

Table Of Contents

– Create Angular Component
Implementation
Related Topics

This is the first part if the tutorial. just follow the steps clearly. In this part we assume that you have already know how to create new project in Angular. but if you don’t have idea how to create just click this link and visit so that you have an idea about it.

– Create Angular Component

To create new component, run this code in your terminal

ng generate component componentName

ng g c componentName

The g tag means generate and c tag means component.

For this purpose of this tutorial, I must create two component page. For the parent and child component.

Parent Component

Child Component

so after running the command there is four file generated. html, CSS and two file for type-script.

Implementation

Child Component

.ts file

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

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

  firstName: string = '';
  lastName: string = '';

  constructor() { }


  ngOnInit(): void {
  }

  SetFirstName(fname:string)
  {
    this.firstName = fname;
  }

  SetLastName(lname:string)
  {
    this.lastName = lname
  }

}

.html file

<p>I'm {{ firstName }} {{ lastName }}</p>

Parent Component

.html file

<p>parent works!</p>
<app-child></app-child>

.ts file

import { Component, OnInit, 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 implements OnInit {
  child:any;
  @ViewChild(ChildComponent)
  set appShark(child: ChildComponent) {
    this.child = child
  };
  constructor()
  {
    this.child.SetFirstName("Jave");
    this.child.SetLastName("Lupango");
  }
}

or see this different implementation.

import { Component, OnInit, 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 implements OnInit {

  @ViewChild(ChildComponent) child1:ChildComponent
  constructor()
  {
    this.child1.SetFirstName("Jave");
    this.child1.SetLastName("Lupango");
  }
}

Happy Learning..

GitHub Link: https://github.com/JaveTLupango/AngularCRUD/tree/parent_child

Thank you for visiting my blog site. Hoping you learn more here. please feel free to comment and suggest if there is need to enhance and update. thank you.

How to call child component method from parent in Angular

– Create Angular Component

Implementation

Child Component

Parent Component

Related Topics

How to upload image in Angular