Skip to main content

Call child component method from parent class - Angular

Call child component method from parent class - Angular

In Angular, to share data from a child component to a parent component, the most common approach is using EventEmitter with @Output(). Here's how it works step by step:

Steps for Child-to-Parent Data Sharing

  1. In the Child Component:
    • You define an EventEmitter using the @Output() decorator to emit the data.
  2. In the Parent Component:
    • The parent component listens for the event emitted by the child and handles the data that is sent.

Example:

1. Child Component (child.component.ts)

Here, we want to send data (e.g., a message) from the child component to the parent.

typescript

import { Component, Output, EventEmitter } from '@angular/core'; @Component({ selector: 'app-child', template: ` <button (click)="sendData()">Send Data to Parent</button> `, styleUrls: ['./child.component.css'] }) export class ChildComponent { // Step 1: Declare an EventEmitter and use @Output to make it available to the parent @Output() messageEvent = new EventEmitter<string>(); // Method to emit the data to the parent component sendData() { const message = 'Hello Parent!'; this.messageEvent.emit(message); // Step 2: Emit the data } }

2. Parent Component (parent.component.ts)

Here, the parent component listens for the event emitted by the child.

typescript

import { Component } from '@angular/core'; @Component({ selector: 'app-parent', template: ` <app-child (messageEvent)="receiveMessage($event)"></app-child> <p>{{ receivedMessage }}</p> `, styleUrls: ['./parent.component.css'] }) export class ParentComponent { receivedMessage: string; // Step 3: Define a method to handle the event and receive data from the child receiveMessage(message: string) { this.receivedMessage = message; } }

Explanation:

  1. Child Component:

    • We define an @Output() property messageEvent of type EventEmitter<string>, which emits data of type string.
    • When the button is clicked, the sendData() method is triggered, and the event emits the data (the string "Hello Parent!") to the parent component.
  2. Parent Component:

    • The child component (app-child) is used in the parent’s template.
    • We bind the messageEvent of the child component to the receiveMessage($event) method in the parent. The $event holds the data emitted by the child.
    • The receivedMessage property in the parent component is updated with the message from the child.

Key Points:

  • @Output(): This decorator makes the event emitter available to the parent component.
  • EventEmitter: This is used to emit data or events from the child to the parent.
  • The parent listens for the event using Angular's event-binding syntax (eventName)="handlerMethod($event)".

This approach allows you to share any type of data from the child to the parent in Angular.



What about Viewchild?
In Angular, @ViewChild() is another way to share data between components, specifically allowing the parent component to access and interact with the child component's properties and methods directly. Instead of the child component emitting an event, the parent can get a reference to the child component and call methods or access its properties.

When to Use @ViewChild()

  • When the parent component needs to directly interact with the child component (e.g., call a method, access a property).
  • Useful for situations where you want the parent to control the child component, like manipulating its state or invoking its methods.

How @ViewChild() Works

  1. In the Parent Component: Use @ViewChild() to get a reference to the child component.
  2. Use the Child Component’s Properties or Methods: Once you have the reference, you can access any public properties or methods of the child component.

Example:

1. Child Component (child.component.ts)

Let’s define a child component that has a method and a property that we want the parent to access.

typescript

import { Component } from '@angular/core'; @Component({ selector: 'app-child', template: `<p>Child Component: {{ message }}</p>`, }) export class ChildComponent { message: string = "Hello from Child!"; childMethod() { return "Child Method Invoked!"; } }

2. Parent Component (parent.component.ts)

The parent component will use @ViewChild() to get a reference to the child component and access its properties and methods.

typescript

import { Component, ViewChild, AfterViewInit } from '@angular/core'; import { ChildComponent } from './child.component'; @Component({ selector: 'app-parent', template: ` <app-child></app-child> <button (click)="accessChild()">Access Child Component</button> <p>{{ childMessage }}</p> `, }) export class ParentComponent implements AfterViewInit { @ViewChild(ChildComponent) childComponent!: ChildComponent; childMessage: string = ''; ngAfterViewInit() { // This lifecycle hook ensures that the child component is initialized } accessChild() { // Access the child component's property and method this.childMessage = this.childComponent.message; // Accessing property console.log(this.childComponent.childMethod()); // Invoking method } }

Explanation:

  1. Child Component:

    • message: A public property.
    • childMethod(): A public method that returns a string.
  2. Parent Component:

    • @ViewChild(ChildComponent): This is how we get a reference to the child component (app-child) in the parent.
    • accessChild(): This method is invoked when the user clicks the button. It accesses the child component's message property and childMethod() and updates the childMessage property in the parent component.
  3. ngAfterViewInit():

    • The @ViewChild() reference is only available after the child component has been initialized. Therefore, we use ngAfterViewInit() to ensure that the child component is fully loaded and ready to be accessed.

Key Points:

  • Direct Access: With @ViewChild(), the parent can directly access the child component’s properties and methods.
  • Lifecycle Hooks: The child component is only available after Angular has initialized it, so it's best to use ngAfterViewInit() or a later lifecycle hook to ensure the child is ready.
  • Not for Data Sharing: This approach is not strictly about data sharing but more about controlling and interacting with the child component.

Use Cases:

  • When the parent needs to manipulate the child’s state (e.g., reset forms, change UI).
  • When you want to call specific methods in the child from the parent.
By Anil Singh | Rating of this article (*****)

Popular posts from this blog

nullinjectorerror no provider for httpclient angular 17

In Angular 17 where the standalone true option is set by default, the app.config.ts file is generated in src/app/ and provideHttpClient(). We can be added to the list of providers in app.config.ts Step 1:   To provide HttpClient in a standalone app we could do this in the app.config.ts file, app.config.ts: import { ApplicationConfig } from '@angular/core'; import { provideRouter } from '@angular/router'; import { routes } from './app.routes'; import { provideClientHydration } from '@angular/platform-browser'; //This (provideHttpClient) will help us to resolve the issue  import {provideHttpClient} from '@angular/common/http'; export const appConfig: ApplicationConfig = {   providers: [ provideRouter(routes),  provideClientHydration(), provideHttpClient ()      ] }; The appConfig const is used in the main.ts file, see the code, main.ts : import { bootstrapApplication } from '@angular/platform-browser'; import { appConfig } from '

39 Best Object Oriented JavaScript Interview Questions and Answers

Most Popular 37 Key Questions for JavaScript Interviews. What is Object in JavaScript? What is the Prototype object in JavaScript and how it is used? What is "this"? What is its value? Explain why "self" is needed instead of "this". What is a Closure and why are they so useful to us? Explain how to write class methods vs. instance methods. Can you explain the difference between == and ===? Can you explain the difference between call and apply? Explain why Asynchronous code is important in JavaScript? Can you please tell me a story about JavaScript performance problems? Tell me your JavaScript Naming Convention? How do you define a class and its constructor? What is Hoisted in JavaScript? What is function overloadin

List of Countries, Nationalities and their Code In Excel File

Download JSON file for this List - Click on JSON file    Countries List, Nationalities and Code Excel ID Country Country Code Nationality Person 1 UNITED KINGDOM GB British a Briton 2 ARGENTINA AR Argentinian an Argentinian 3 AUSTRALIA AU Australian an Australian 4 BAHAMAS BS Bahamian a Bahamian 5 BELGIUM BE Belgian a Belgian 6 BRAZIL BR Brazilian a Brazilian 7 CANADA CA Canadian a Canadian 8 CHINA CN Chinese a Chinese 9 COLOMBIA CO Colombian a Colombian 10 CUBA CU Cuban a Cuban 11 DOMINICAN REPUBLIC DO Dominican a Dominican 12 ECUADOR EC Ecuadorean an Ecuadorean 13 EL SALVADOR

25 Best Vue.js 2 Interview Questions and Answers

What Is Vue.js? The Vue.js is a progressive JavaScript framework and used to building the interactive user interfaces and also it’s focused on the view layer only (front end). The Vue.js is easy to integrate with other libraries and others existing projects. Vue.js is very popular for Single Page Applications developments. The Vue.js is lighter, smaller in size and so faster. It also supports the MVVM ( Model-View-ViewModel ) pattern. The Vue.js is supporting to multiple Components and libraries like - ü   Tables and data grids ü   Notifications ü   Loader ü   Calendar ü   Display time, date and age ü   Progress Bar ü   Tooltip ü   Overlay ü   Icons ü   Menu ü   Charts ü   Map ü   Pdf viewer ü   And so on The Vue.js was developed by “ Evan You ”, an Ex Google software engineer. The latest version is Vue.js 2. The Vue.js 2 is very similar to Angular because Evan You was inspired by Angular and the Vue.js 2 components looks like -

55 Best TypeScript Interview Questions and Answers - JavaScript!

What Is TypeScript? By definition, "TypeScript is a typed superset of JavaScript that compiles to plain JavaScript." TypeScript is a superset of JavaScript which provides optional static typing, classes and interfaces. => The TypeScript was first made public in the year 2012. => Typescript is a modern age JavaScript development language. => TypeScript is a strongly typed, object oriented, compiled language. => TypeScript was designed by Anders Hejlsberg (designer of C#) at Microsoft. => TypeScript is both a language and a set of tools. As an Example of TypeScript, class Hello {     msg : string ;      constructor ( message : string ) {          this . msg = message ;      }       getMsg () {          return "Hello, " + this . msg ;      } } TypeScript introduced a great deal of syntax taken from object-oriented programming, including but not limited to: 1) Interfaces 2) Classes 3) Enumerated t