unable get data from shared service in angular 6

Question

Am trying to share json data from one component to another component (like parent to child) .using a service.I have two methods in this service one for setJsonData and other is getJson Data.

Service Class

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

@Injectable({
  providedIn: 'root'
})
export class XeproviderdataserviceService {
  jsonData = {};
  constructor() {

    this.jsonData = {};
  }
  setXeProviderJson(val: object) {
    this.jsonData = val;
    console.log('setjson Data-', this.jsonData);

  }
  getXeProviderJson() {
    return this.jsonData;

  }
}

Parent Component

export class MainComponent implements OnInit {
  active = 1;
  constructor(private xeDataService: XeproviderdataserviceService) { 

  ngOnInit() {

  }
  selectTab(value, jsonData) {
    this.active = value;
    this.xeDataService.setXeProviderJson(jsonData);
    console.log('getting', this.xeDataService.getXeProviderJson);
  }
}

Child Component

import { Component, OnInit } from '@angular/core';
import { XeproviderdataserviceService } from '../xeproviderdataservice.service';

@Component({
  // tslint:disable-next-line:component-selector
  selector: 'xservice-tab-component',
  templateUrl: './xeservice.component.html',
  styleUrls: ['./xeservice.component.css']
})
export class XeserviceComponent implements OnInit {
   constructor( xeDataService: XeproviderdataserviceService) {
     console.log('get json Data', xeDataService.getXeProviderJson());
   }

  ngOnInit() {
  }

}

Above code i can able to set data using setJsonData function.when i trying to getdata using getJsonData method it will get empty. i couldn't figure out what I am doing wrong..... in browser i can see like this

use Either `BehaviorSubject`/`Subject` inside a service, and send stream to that `Observable`, and keep `subscription` inside your component where you want to listen to data. — Pankaj Parkar, Mar 17 '19 at 06:09
when i import import {BehaviorSubject} from 'rxjs/BehaviorSubject'; it showing like "has no exported member 'BehaviorSubject'" — arj, Mar 17 '19 at 06:12
i need to pass json data like this "{id: 1, name: "Service 1", port: "8090", ip: "10.0..4", status: "InActive"}" tats why am prefer service — arj, Mar 17 '19 at 06:19
@arj, even for data like object mentioned above you can use `@Input`. — Sai M., Mar 17 '19 at 06:31
@arj : can u create a small demo on stackblitz.com ? it would help us fix your issue asap — Shashank Vivek, Mar 17 '19 at 07:50

score 2 · Accepted Answer · answered Mar 17 '19 at 15:16

You can use Subject for this process it will emit the value for every event triggers. Very simple and important topic "Subject"

Parent component

.html
<button (click)="updateName(yourValue)">Update</button>

.ts file

import { Component, OnInit } from '@angular/core';
import { XeproviderdataserviceService } from '../xeproviderdataservice.service';

export parentComponent implements OnInit {

 constructor( xeDataService: XeproviderdataserviceService) {}

 ngOnInit(){}

  updateName(yourValue) {
    this.subjectService.setXeProviderJson(yourValue);
  }

In Your XeproviderdataserviceService Service..

import { Observable, Subject } from 'rxjs';

export XeproviderdataserviceService {

  subjectName : Subject<any> = new Subject<any>();
  observableName$ : Observable<any> = this.subjectName.asObservable();

  constructor(){}

   setXeProviderJson(name) {
     this.subjectName.next(name);
  }
}

Child Component

import { Component, OnInit } from '@angular/core';
import { XeproviderdataserviceService } from '../xeproviderdataservice.service';

export childComponent implements OnInit {

 constructor( xeDataService: XeproviderdataserviceService) {}

ngOnInit(){

    this.xeDataService.observableName$.subscribe(value => {
    console.log(value);
    this.updatedValue = value;
  })

}

Why this need to implement observables? I don't think in so simple cases you need to implement rxjs. — Manzurul, Mar 17 '19 at 16:02
i need to pass json data tats why am using observable.I changed to subject ,now its working what am expected.Thanks @Hari — arj, Mar 17 '19 at 17:55
@arj rxjs is not necessary to send json. rxjs is for streaming and on demand data providing. — Manzurul, Mar 17 '19 at 19:14
yes for simple cases subject not required, input is enough, but if you have two modules and using lazy loading you need to send value to another module, at that time 'Input' and 'Output' is failed. Subject get triggers for every event by user if its lazy loading. — Hari9513, Mar 18 '19 at 07:51

score 0 · Answer 2 · answered Mar 17 '19 at 15:55

In your parent component you have declarded the service as private object private xeDataService: XeproviderdataserviceService but in your child component you have declared it as public xeDataService: XeproviderdataserviceService. It should be same in both component and then it will work as a singleton object of the service and then you should get the value.

unable get data from shared service in angular 6

2 Answers2