Type od data sharing between components in angular
Introduction to angular:
hello dear learner and visitor thanks for choosing us .Angular is the JavaScript open source SPA(Single Page Application) framework .we can create our application using its MVVC architecture with advanced feature ,easy way of implementation and configuration. In angular to make any web application oor hybrid is very easy because the structure of of project is so easy to understand for any web developer.we can also make hybrid and native application with the help of other framework with angular.
Feature of data sharing in angular
There are many ways with which we can share our required to the components inside angular application.first of all we need to understand the requirement of this sharing of data.So many time when we do develop in our project we have to keep our data confidential and secure data privacy is more important in any web application.Sometime we may need to share data ffrom page to another page that means in angular is one component to another so logically we have to share data between components,because every page inside the angular applications are one one components.
so let's understand the logic of components first.So whenever we do develop of any application we make api request to backend server to get our required data and then after that we do some modification and deletion and many more so some time we may need to share the fetched data to another page for some modification something like if we want to edit the data of one in another then we must have to pass that data to the that component where we want to edit ,here we need the logic of data sharing between components.
Types of Data sharing ways
there are many ways to share data or information from one component to another some of the them are .
1.With the help of decorators
2.with help of Subjects
2.Localstorage
With the help of decorators
Angular provides to decorators @Input() and @Output() with the help of these two decorators we can share data between components .
@Input()
This angular decorator is used to share data from parent to child means if we will create any variable inside one child component with this decorator then angular can understand that this particular component can access the data of the parent component .
Example :-
import { Component, Input } from '@angular/core';
export class childComponent{
@Input() data: string;
}
Suppose we have a child component like this so have added a property with @input decorator and have imported it from @angular/core .
And now we have added this variable inside the template of the same child component like this with string interpolation.
<div>{{item}}</div>
Now we are going to add some code inside the parent component something like this
import { Component, Input } from '@angular/core';
export class ParentComponent{
datavalue="hellow world";
}
<app-child [data]="datavalue"></app-child>
Here we have added the child component's selector tag and then added child component reference with parent component property.
@OutPut() decorator
Using @output decorator inside we can share data from child to parent or we can say we can share custom events from parent tot child with help of EventEmiter .So if we will add a property inside child component with @output decorator then the parent component can easily access the property or events of child components means if any change will happen inside the child component then parent component can catch it .
Example
:export class ChildComponent {
@Output() Event = new EventEmitter<string>();
demoFunction(value: string) {
this.Event.emit(value);
}
}
Here we have added a property with @output decorator which is holding the instant of EventEmitter class of string type and then below that we have created a method raise an event in which it emits the value the user types .
And inside child template
<button (click)="demoFunction(newItem.value)">Click ME</button>
So here we are adding a event binding with (click) and function demoFunction by passing one parameter .Now when we will click the button the data whatever we will pass from this function parameter will received by parent ,as child component using 2output decorator when any event will happen it will raise a event to parent component .
Let's move to the parent component:
export class ParentComponent {
DataArray=[data1,data2,..........]
addvalue(newitem: string) {
this.DataArray.push(newItem);
}
}
here we have added a array with some items and then we have added a function which on execution will add a item to the array .Fine next is to add some code inside template.
Parent template
<app-child (Event)="addvalue($event)"></app-child>
2.Data sharing with Subjects
Subject is the another way feature of RXJS with which we can share data from one component
Example
for this we have to create a Subject type variable inside our service class .if no idea how to create a service in angular click here.
So let's for example create one Subject
private subjectVariableName = new Subject<any>
this a subject variable of string type .So now to make data sharing with this variable we first have instantiate the service inside the component's constructor and then we can access this variable .Once we have the access to that variable you can set value it like this .
this.servicename,subjectVariableName.next(anyvalue);
That's it now just have to subscribe to this subject inside another component after instatiating the service class like this .
this.servicename.subjectVariableName.subscribe(data=>{
console.log(data)
console.log(data)
)
Disadvantages of Subject:
One main disadvantage of subject is whatever value we will set inside subject variable are temporary means data will be vanish after reloading or refreshing the page .
3.Using LocalStorage
we can also share data between data beyween components using localstorage web toll storage
Example:-
Yes to achieve this we just have to set the value inside the source component and and then we can get that value inside destination component like this .
Inside source component set the value with key in localstorage
localStorage.setItem("name","Robert");
And inside destination component get the the value like this
localStorage.getItem("name");
Disadvantegs of localstorage
To store data in local storage is not safe anyone can access your confidential data
So from whole discuss we found that first way is better than other because data transfer happens internally .
Tags:
Angular