How to Call Parent Components's Function from Child Component in React ?

How to communicate from parent component to the child component in Angular 9 ?

Last Updated : 11 Jun, 2020

Angular makes the communication between components very easy. In this article, we will learn how to communicate from a parent component to the child component. Approach:

Let's create two components:
1. parent
2. child
In the parent component, declare the property that you want to receive in the child component, say 'ParentId'.
While including the child component inside the parent component, bind the 'ParentId' property to the child component using property binding.
javascript
<child [id] = "parentid"></child>
Now in the child component import Input from @angular/core and create a property decorated by @input decorator to receive 'ParentId' from parent component. The name of property should be the same as used for binding the 'ParentId' property i.e 'id'.
'ParentId' will be successfully received in the child component as 'id'.

Example:

In this example, we will create a property 'ParentId' and receive it in the child component. Let's write the code for the parent component.

javascript

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

@Component({
  selector: 'app-root',

// code for parent component view.

  template:`
  <div style="text-align: center;">
  <h1>
    parent component - {{parentid}}
  </h1>
  </div>

// Bind the ParentId to child component.

  <child [id] = "parentid"></child>
  `,
  styleUrls: []
})
export class AppComponent {

// This property is to be sent to the child component.

parentid: number = 1;

}

Now write the code for the child component

javascript

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

@Component({
  selector: 'child',
  template: `
  <div style="text-align: center;">
  <h2>child component</h2>

// property successfully received from the parent component.

  parent id is {{id}}
  </div>
  `,
  styles: []
})
export class TestComponent implements OnInit {

// @input decorator used to fetch the 
// property from the parent component.

  @Input()
  id: number;
  
  ngOnInit(): void {
  }

}

Output:

How to Call Parent Components's Function from Child Component in React ?

V

vaibhav19verma

Improve

Article Tags :

Similar Reads

How to pass data from Parent to Child component in Angular ?

We can use the @Input directive for passing the data from the Parent to Child component in AngularUsing Input Binding: @Input - We can use this directive inside the child component to access the data sent by the parent component. Here app.component is the Parent component and cdetail.component is th

How to Call Parent Components's Function from Child Component in React ?

In React, it is very important to manage communication between components for building flexible and maintainable applications. Sometime, you need to trigger a function defined in a parent component from a child component. In this article, we'll see how to achieve this in React by passing down functi

How to Pass Data from One Component to Another Component in ReactJS?

In ReactJS, components are the building blocks of your user interface. Components allow you to create modular, reusable UI elements, but sometimes these components need to communicate with each other.In this article, we will explore the different methods to pass data between components in ReactJS.1.

Passing data from Child to Parent Component in Angular

In Angular, passing data from a child component to its parent component involves emitting events. Essentially, the child component emits an event containing the data that the parent component needs to receive. This is typically achieved using Angular's EventEmitter class, where the child component e

Parent to Child Communication with Metadata in Angular 17

A parent component in Angular can transfer data or information to its child components using parent-to-child communication. This is an essential component of creating reusable and modular Angular applications. This is an overview of Angular 17's parent-to-child communication features. PrerequisitesB

How to set Parent State from Children Component in ReactJS?

To set the parent state from a child component, we use Reactâ€™s unidirectional data flow. Instead of directly passing data, we pass a function that enables the child to send data back to set the parent state.Prerequisites:React JSuseState HookApproachTo set parent state from child component in React,

How does useImperativeHandle help parent and child components communicate?

useImperativeHandle in React allows parent and child components to communicate more effectively by enabling the child component to specify which methods and properties should be accessible to the parent through a ref. How Does It Help:Customized Interaction: Child components can define a specific se

How to establish communication between independent components in AngularJS ?

AngularJS is a popular open-source web application framework that allows developers to create dynamic and interactive web applications. One of the key features of AngularJS is its ability to allow independent components to communicate with each other. In this article, we will see the process of esta

How to Pass Data From Child Component To Its Parent In ReactJS ?

In ReactJS, the flow of data is typically one-way, meaning data is passed from parent to child components using props. However, there are situations where you may need to pass data from a child component back up to its parent component. In this article, we will cover how to pass data from a child co

How To Call Function Inside Child Component From Parent Component Using useRef hook ?

To call a function inside a child component from a parent component, first, create a useRef hook in the parent component. Then, pass this reference as a prop to the child component. In the child component, use this reference wherever needed to access or call the function from the parent.Prerequisite