In previous articles we have seen how to communicate within components using @input and @output. Creating the Angular service to communicate with components are the best method compared to other. Angular service can be consumed by multiple components by subscribing to the service.
Here is the Example of Angular service:
In the below example I will be creating a service that will show the text entered in another component. From the below image,
App.Component.ts:
Here we use the service and call the onUserEnters function to keep PreviewService value UpToDate.
Second-Component.Component.ts :
Here we are consuming the service that created earlier and assigning the same to variable called previewText
Second-Component.Component.html :
Here previewText is used to display the value.
Third-Component.Component.ts :
Here we consume the service to get the value that entered in Component 1 and Assigning the length of the value to the charCount variable.
Third-Component.Component.html :
Displaying the charCount value to user
Include Forms Module and other components in app.module.ts
Thats it!!
Here is the Example of Angular service:
In the below example I will be creating a service that will show the text entered in another component. From the below image,
- Component 1 has a textbox
- PreviewService is the service used to get the latest value in Component1 textbox.
- Component 2 shows the value from PreviewService.
- Component 3 shows the length of the value from PreviewService.
Preview-Service.Service.ts :
PreviewService is created with onUserEnters function that gets the input for the service and userTextObservable$ for exposing the same as a service. Here we have used BehaviouSubject that can hold the current value and previous value, where Subject can hold only current value.
PreviewService is created with onUserEnters function that gets the input for the service and userTextObservable$ for exposing the same as a service. Here we have used BehaviouSubject that can hold the current value and previous value, where Subject can hold only current value.
import { Injectable } from '@angular/core';
import { BehaviorSubject } from '../../../node_modules/rxjs';
@Injectable({
providedIn: 'root'
})
export class PreviewService {
private _userTextSubject = new BehaviorSubject(null);
userTextObservable$ = this._userTextSubject.asObservable();
onUserEneters(userText :string){
this._userTextSubject.next(userText);
}
constructor() { }
}
App.component.html : Here we are creating a textbox and two way binding for userText as shown below. It also holds the selector of the second and third component.
App.Component.ts:
Here we use the service and call the onUserEnters function to keep PreviewService value UpToDate.
import { Component } from '@angular/core';
import {PreviewService} from '../app/services/preview-service.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private previewService: PreviewService){}
private _userText: string;
get userText(){
return this._userText;
}
set userText(value :string){
this._userText=value;
this.previewService.onUserEneters(this._userText);
}
}
Second-Component.Component.ts :
Here we are consuming the service that created earlier and assigning the same to variable called previewText
import { Component, OnInit } from '@angular/core';
import {PreviewService} from '../services/preview-service.service';
@Component({
selector: 'second-component',
templateUrl: './second-component.component.html',
styleUrls: ['./second-component.component.css']
})
export class SecondComponentComponent implements OnInit {
public previewText:string;
constructor(private previewService :PreviewService) { }
ngOnInit() {
this.previewService.userTextObservable$.subscribe(x=>this.previewText=x);
}
}
Second-Component.Component.html :
Here previewText is used to display the value.
Third-Component.Component.ts :
Here we consume the service to get the value that entered in Component 1 and Assigning the length of the value to the charCount variable.
import { Component, OnInit } from '@angular/core';
import {PreviewService} from '../services/preview-service.service';
@Component({
selector: 'third-component',
templateUrl: './third-component.component.html',
styleUrls: ['./third-component.component.css']
})
export class ThirdComponentComponent implements OnInit {
public charCount:number=0;
constructor(private previewService : PreviewService){}
ngOnInit() {
this.previewService.userTextObservable$.subscribe(
x=>{
if(x!=null)
this.charCount=x.length;
});
}
}
Third-Component.Component.html :
Displaying the charCount value to user
Include Forms Module and other components in app.module.ts
Thats it!!
10 Comments
very helpful
ReplyDeleteThis was a wonderful site and I really enjoy it the data you shared. Cheers for sharing with us your wonderful blog.
ReplyDeleteBreak The Cup For boy Free game Gold Diggers Adventure play Rapunzel Fashionista Busy Day game
This comment has been removed by the author.
ReplyDeleteWow,great information. I am sure the info on your blog will help others,Thanks.
ReplyDeleteC C++ Training in Chennai
c++ courses in chennai
C++ Training in Chennai
C C++ Training in Adyar
core java training in chennai
javascript training in chennai
SAS Training in Chennai
QTP Training in Chennai
Awesome blog with lots of information. It is really helpful for all.
ReplyDeleteAngularJS Training in Chennai
AngularJS course in Chennai
Angular 6 Training in Chennai
ReactJS Training in Chennai
PHP Training in Chennai
Web Designing course in Chennai
Tally course in Chennai
AngularJS Training in Velachery
AngularJS Training in T Nagar
AngularJS Training in OMR
One of the defining traits of middle age is an acute and inescapable awareness of loss that seems to be wired into experience. Its autumnal tone is unexcitable and calm: it has lost the violent optimism of youth and is at peace with its fatalistic acceptance that life would not give another chance.Every evening is a dire reminder of another petal fallen off the dazzling, but wilting, flower of youth. Every morning, a tortured search in front of the mirror for another new grey, another line added to the deepening crow's feet.
ReplyDeletekizi kizi 2 games
jogo friv gratis
friv4school 2019
I definitely enjoying every little bit of it. It is a great website and nice share. I want to thank you. Good job! You guys do a great blog, and have some great contents. Keep up the good work. שרת וירטואלי
ReplyDeletePretty good post. I just stumbled upon your blog and wanted to say that I have really enjoyed reading your blog posts. Any way I'll be subscribing to your feed and I hope you post again soon. Big thanks for the useful info. Europa-Road targonca szállítás Debrecen
ReplyDeleteExcellent blog! Thanks for sharing a very interesting blog, I appreciate your blog post.
ReplyDeleteeasy way to learn java
mobile app development platforms
best campaigns
what is cloud computing azure
tableau interview questions pdf
This is one of the best content for this topic and this is very useful for me. Thank you!
ReplyDeleteUnix Training in Chennai
Linux Training in Chennai
Linux Course in Chennai