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.