Passing data from Component A to Component B using service - Angular 2

Question

Hi I am trying to pass a object from Component A to another sibling Component B and I am using service to do so and I am using Subject. But when calling the get method from service I am not able to get the data in Component B. I don't know what I am doing wrong. Any help would be great. My code is as below -

Hierarchy Service

import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import { Subject } from 'rxjs/Subject';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/toPromise';
import 'rxjs/add/operator/map';

@Injectable()
export class HierarchyService {

  private dataObj = new Subject;
  getDataObj = this.dataObj.asObservable();

  constructor () {}

  setData(setData:Object){
    console.log("setData +++ ", setData);
    this.dataObj.next(setData);
  }
}

Component A Inside a event handler I am setting below code -

this.hierarchyService.setData(treeModel);

Component B inside ngOnInit I am trying to get the data that I set in Component A

 this.hierarchyService.getDataObj.subscribe(data => console.log("data ", data));

JD_Coder · Accepted Answer · 2017-10-17 18:57:09Z

2

I found the solution, I was actually injecting the hierarchy service as provider for Component A and Component B. Instead I just added the service as provider for my app.module and removed as providers from Component A and Component B and it worked.

answered Oct 17, 2017 at 18:57

JD_Coder

731 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ali Adravi · Accepted Answer · 2017-10-17 19:24:58Z

1

How are you using your services is not very clear.

Are you using providers: [] on both component? in that case the both uses different instantiation and are not singleton, so data cannot be shared.

Put your service in providers array in app.module and try again.

If you want to use the @Input() @Output() to share the data then see this post Angular component communication by using Input Output decorator

answered Oct 17, 2017 at 19:24

Ali Adravi

23k9 gold badges93 silver badges97 bronze badges

1 Comment

JD_Coder Over a year ago

Thanks Ali, Yes initially I was adding my service in providers for both the component that's why I was not able to get data as each component was creating singleton instance. Then I removed it and just added it to the app.module and it worked fine.

Collectives™ on Stack Overflow

Passing data from Component A to Component B using service - Angular 2

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related