Passing Data Between Components

We have seen that we can pass the data between the components using the @Input and @Output directives and using event emitters. Let’s see the other two methods - @View child and the services which can be used to pass the data between components.

Passing Data Between Components

So, let’s break up the article into two sections; the first one will be ViewChild and another one is the data services.

Passing data using ViewChild

ViewChild is the way that allows the component to be injected into another component and give parent component access to the child component available.

In short, to use the properties of the child component, we can use the ViewChild. To get this working, let's add 2 components in the application we have, namely MasterwithViewChildComponent.ts and ChildwithViewChildComponent.ts.

Next, let us see the ChildwithViewChildComponent.ts and check the following snippet.

import {
Component,
OnInit
} from '@angular/core';
@Component({
selector: 'app-childwith-view-child',
templateUrl: './childwith-view-child.component.html',
styleUrls: ['./childwith-view-child.component.css']
})
export class ChildwithViewChildComponent implements OnInit {
counter: number = 0;
IncreaseNumber(): void {
this.counter++;
}
constructor() {}
ngOnInit() {}
}

When we see the code snippet, we can see that the class has a normal counter property and a method named IncreaseNumber() which increases the counter by one every time this function is called.

Next, let's look at the code snippet that we have for the Master component one.

import {
Component,
OnInit,
ViewChild
} from '@angular/core';
import {
ChildwithViewChildComponent
} from '../childwith-view-child/childwith-view-child.component'
@Component({
selector: 'app-masterwith-view-child',
templateUrl: './masterwith-view-child.component.html',
styleUrls: ['./masterwith-view-child.component.css']
})
export class MasterwithViewChildComponent implements OnInit {
@ViewChild(ChildwithViewChildComponent)
private childcomponent: ChildwithViewChildComponent;
Increase(): void {
this.childcomponent.IncreaseNumber();
}
Dicrease(): void {
this.childcomponent.counter--;
}
constructor() {}
ngOnInit() {}
}

Let’s look at the things step by step.

Import the ViewChild from the @angular/core
The @ViewChild decorator is present in the Angular core so we need to import the package
Next, the below code is the most important snippet to check.
@ViewChild(ChildwithViewChildComponent)
private childcomponent: ChildwithViewChildComponent;

These lines of the code are used to query the child component and inject the same property inside the local object of the child component which is created in the second line.

It also has two functions IncreaseNumber() and Dicrease(), in which Increase () calls the Function which is present in the child component and Dicrease () reduces the counter property of the child component by 1.

Here, we are. Let's modify the master template with following code.

<p>
<b>@ViewChild with Components..</b>
<br>
<br>
<input type="button" value="Increase" (click)=Increase()>
<input type="button" value="Dicrease" (click)=Dicrease()>
<app-childwith-view-child></app-childwith-view-child>
</p>

We have instantiated the child component and the two Buttons which will call the Increase and Decrease functions respectively in the component and get the output accordingly.

Passing data using data service

So far, we have seen data sharing between the related components. Now, let’s see how data is shared across the components which are not related. For the components like this, the idea behind having the shared data is for using the shared service which will sync all the data across the components to which it is referred.

To achieve this, let's add the Data Service first which will be holding the data that we need for the components. Let's see the Data.service.ts

import {
Injectable
} from '@angular/core';
import {
BehaviorSubject
} from 'rxjs'
@Injectable()
export class DataService {
private messageSource = new BehaviorSubject < string > ("Start");
currentmessage = this.messageSource.asObservable();
constructor() {}
changemessage(message: string): void {
this.messageSource.next(message);
}
}

Above is the code for the DataService class but before going into the details of this class, let us try to understand some snippet available In the code,

Import{Injectable} from ‘@angulr/core’
This Line which is the first line in the code brings the @Injectable decorator In the code This is used to allow the functionality of the class to be injected and used in the other components or Modules.
Import{BehaviorSubject} from ‘@angular/core’
It is a subject type which can be used to return a special type of the observable which can be used to subscribe to the various types of the messages.

It also gives us the observables from the subject using the Method as observable() on the behavior subject.

In the above code, we have added the changemessage method which gets the next from the observable subject an return the message.

To consume the service in the components, let's add this service as a provider to the Root Module which is app.module.ts. Let us add the following snippet to the app module.

providers: [DataService],

We have added the Providers to the app module. Now, let's check the components which want to communicate with each other.

Let's see first component.

import {
Component,
OnInit
} from '@angular/core';
import {
DataService
} from '../data.service'
@Component({
selector: 'app-first-component',
templateUrl: './first-component.component.html',
styleUrls: ['./first-component.component.css']
})
export class FirstComponentComponent implements OnInit {
message: string = "";
constructor(private data: DataService) {}
ngOnInit() {
this.data.currentmessage.subscribe(message => this.message = message);
}
}

In this, we are importing the dataservice in the component and we can see that the constructor of the component is following.

constructor(private data:DataService)
{
}

In this, we are adding the object of the DataService which is singleton object which is created only once. Next, we are subscribing to any change in the currentmessage property of the dataService which will be assigned to the message property of the class. next is the second component which has code like below.

import {
Component,
OnInit
} from '@angular/core';
import {
DataService
} from '../data.service';
@Component({
selector: 'app-secondcomponent',
templateUrl: './secondcomponent.component.html',
styleUrls: ['./secondcomponent.component.css']
})
export class SecondcomponentComponent implements OnInit {
childmessage: string = ""
counter: number = 0;
constructor(private data: DataService) {}
ngOnInit() {
this.data.currentmessage.subscribe(Message => this.childmessage = Message);
}
newmessage(): void {
this.data.changemessage("changing counter from sibling " + this.counter++);
}
}

It also follows the same method when we are subscribing and assigning the value of the currentmessage from the data service to the childmessage property of the class. Also, we have a new method, newmessage, which calls the data.changeMessage() which subsequently changes the property of the messageSource. To run the application, just change the app.component.html somewhat to look like below.

<div><strong>Data passing Using Service</strong><br>
First component:: <app-first-component></app-first-component>
<br>
Second Component:: <app-secondcomponent></app-secondcomponent>

To sum up, using the DataService to share the data between components, we should adopt the following steps.

Add DataService class decorated with the @Injectable
Use the behavior Subject from the RxJS BehaviorSubject Subject
Subscribe to the changing property an assign to some property In the component

Hope you understood the various ways to handle the data flow between the components with these two articles.

References

https://angularfirebase.com/lessons/sharing-data-between-angular-components-four-methods/#data-service-ts
https://rangle.io/
https://angular.io/