Sharing Data with a Service in Angular

In my last article we discuss on how to share data using ViewChild.

In this article we discuss on how to share data using Service.
When you want to share data without any connection of the component at that time we use shared service. Data should sync on the component. In these example we use RXJS in Services to capture data and sync we use “BehaviorSubject” in Angular.


BehaviorSubject

  • getValue() function to extract the last value as raw data.
  • It always return the current value on subscription
  • Ensures that the component always receives the most recent data

Let’s create Message service.


import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable()
export class MsgService {

  private messageSource = new BehaviorSubject('first message');
  currentMessage = this.messageSource.asObservable();

  constructor() { }

  changeMessage(message: string) {
    this.messageSource.next(message)
  }

}


In above code we have use “BehaviorSubject” as private message then we have set as observable so when value change we can get that value and broadcast that value in all places.

Let’s create Component


import { Component, OnInit } from '@angular/core';
import { MsgService } from "./msgservice";

@Component({
  selector: 'my-app',
  template: `
    {{message}} 
    <hello></hello>
  `,
})
export class AppComponent implements OnInit {

  message:string;

  constructor(private data: MsgService) { }

  ngOnInit() {
    this.data.currentMessage.subscribe(message => this.message = message)
  }

}



Let’s create sibling component.


import { Component, OnInit } from '@angular/core';
import { MsgService } from "./msgservice";

@Component({
  selector: 'hello',
   template: `
    {{message}} 

    <button (click)="newMessage()" >New Message </button >
  `,
 
})
export class HelloComponent  {

    message:string;
    constructor(private data: MsgService) { }

    ngOnInit() {
    this.data.currentMessage.subscribe(message => this.message = message)
  }

  newMessage() {
    this.data.changeMessage("Hello from Sibling")
  }


}

Here is the full embedded code of the data sharing using Message service.

Spread the love
  • 33
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •