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 ...

How To Optimizing Database Performance: Tips and Techniques for Developers

Best Practices for Optimizing Database Performance: Tips and Techniques for Developers Navigating the labyrinth of database performance optimization can often seem like a daunting task for many professionals. Especially for database developers, mastering this critical skill has immense value, as it enhances both the efficiency and responsiveness of their applications.  Effective database performance optimization leads to faster data retrieval and smoother transactions.  A key challenge, however, lies in knowing  how to hire database developers who are well-versed in optimization techniques. The market is flooded with many professionals, but finding the right expert who understands the intricacies of database performance can be like looking for a needle in a haystack. Employers need to seek those who are not only proficient in their craft but also updated with the latest optimization practices. This guide, therefore, not only aims to provide developers with a compre...

Why doesn't App Module exist in Angular 17?

Today, I just started exploring Angular version 17 using ng new and found a problem for the newly created project using the command - ng new. The problem is: Path "/src/app/app.module.ts" does not exist while doing ng add in the Angular project. The ‘ng new’ does not generate app.module.ts in the src root folder Angular CLI 17.0.0. From Angular 17 onwards, standalone is now the new default for the CLI . So when we create a new project ‘ app.module.ts ’ file will not create Path " /src/app/app.module.ts ". Run the following command to create the new project including the file ‘app.module.ts’ in your project: ng new AngularMap  --no-standalone Note: Here ‘AngularMap’ is the project name I created. Standalone components are a feature introduced in Angular version 14. Now the changes applied in angular 17 default, the Angular team strongly recommends using them as they are easier to use, and understand.

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 ...

SOLID Principle - Dependency Inversion Principle (DIP)

The SOLID Principles are the design principles that enable us to manage several software design problems. These principles provide us with ways to move from tightly coupled code to loosely coupled and encapsulated real business needs properly. Also readable, adaptable, and scalable code. The SOLID Principles  guide developers as they write readable, adaptable, and scalable code or design an application. The SOLID Principles can be applied to any OOP program. The SOLID Principles were developed by computer science instructor and author Robert C. Martin. Now, SOLID principles have also been adopted in both agile development and adaptive software development. The 5 principles of SOLID are: 1.       Single-Responsibility Principle (SRP) 2.       Open-closed principle (OCP) 3.       Liskov Substitution Principle (LSP) 4.       Interface Segregation Principle (ISP) 5.    ...