Data Sharing Between Angular Components

Data-sharing techniques for Angular components

Data sharing between components in Angular is a big issue for the developer. I've seen angular.io lessons about data sharing, but I don't think the examples are that good for grasping the idea. As a result, I have created a demonstration of data-sharing concepts in Angular with real-time scenarios that you encounter in everyday Angular development here in this tutorial.

If we need to share or pass data from one component to another during the development of an Angular application, we can do so by using the concept of data sharing between the components. In Angular, there are some provisions or ways to accomplish the same that will be discussed further in this article. An Angular application may have multiple components with a variety of functionality/features.

Goals for Data Sharing Between Angular Components

1. Parent-to-child component
2. Child to the parent component

1. Parent-Child component:

When @Input() is defined in the child component, the master or parent component will supply the value. We initially create our data model utilizing interfaces before transferring data between components. Here, we define a Product interface with the mandatory fields productID and product name and the optional fields.

The product interface is now imported into our parent component. Create the template now. A product id and product name are present in this template. I now want to give the child component the product name. I want data to be returned to the parent component once the child component updates the product name.

Code for the parent component

code for a child component

The next decorator is now defined in the child component. The name of the parent component property that we want to share is childToMaster. The input decorator makes it very clear that the child component is looking for something from the parent component.

@Input(‘childToMaster’) masterName: string;

In the parent component, we are going to define the childToMaster property.

<app-child [childToMaster]=product.productName (childToParent)=”childToParent($event)”></app-child>

Right now, we're sharing a product. productName is a child component property. As soon as you begin writing productName, the child component will automatically receive it.

2. Child to Parent component:

We require an output decorator to share data from the child with the parent. The output decorator must be defined in the child component as follows:
 

@Output() childToParent = new EventEmitter<String>();

Now, we want to give a parent component access to this property. The event with value must therefore be bubbled to the parent components in order to share data from the child component. The event can be bubbled based on a trigger point; in this case, we're using a button click to do it. The button click triggers a sendToParent call.

sendToParent(name){

this.childToParent.emit(name);

}

The childtoParent attribute must now be linked to the child tag in the parent component.

<app-child [childToMaster]=product.productName (childToParent)=”childToParent($event)”></app-child>

You must set it after the parent component receives the value.

childToParent(name){

this.product.productName=name;

}

Wow, the modifications to the product name in the parent components are now apparent.