Share Data Between Component

Question

I want to share data between component using service. But It not working as expected.

Component

let myNum = 1;
sendChanges(myNum) {
    this.breadService.sendData$.next(myNum);
}

Service

public sendData$: Subject<any> = new Subject();
public setValue$: BehaviorSubject<any> = new BehaviorSubject(this.data);

Sibling COmponent

ngOnInit() {
    this.breadService.sendData$.subscribe(() => {
        this.breadService.setValue$.subscribe(data=>{
            this.id = data
            console.log(this.id);
        });
    });
}

Barremian · Accepted Answer · 2020-05-14 20:19:12Z

7

Here sendData$ is a Subject. Subscription callbacks to a Subject aren't executed till it emits a new value. So the inner subscription wouldn't be executed till a new value is pushed to sendData$ after it is subscribed to. You could change the outer observable too to a BehaviorSubject to assign the value in the subscription immediately.

Service

private sendDataSource: BehaviorSubject<any> = new BehaviorSubject(null);
private setValueSource: BehaviorSubject<any> = new BehaviorSubject(this.data);

public set sendData(data) {
  this.sendDataSource.next(data);
}

public set setValue(value) {
  this.setValueSource.next(value);
}

public get sendData() {
  return this.sendDataSource.asObservable();
}

public get setValue() {
  return this.setValueSource.asObservable();
}

Also a subscription within a subscription isn't elegant. Pipe the outer observable.

Sibling Component

import { pipe } from 'rxjs';
import { switchMap } from 'rxjs/operators';

ngOnInit() {
  this.breadService.sendData.pipe(switchMap(() => this.breadService.setValue))
    .subscribe(data => {
      this.id = data
      console.log(this.id);
    });
}

edited May 14, 2020 at 20:19

answered May 14, 2020 at 20:03

Barremian

31.2k4 gold badges37 silver badges67 bronze badges

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

6 Comments

Pravu Over a year ago

Thanks for your answer.. but I got error on next this.breadService.sendData.next(myNum);

Pravu Over a year ago

Property 'next' does not exist on type 'Observable<any>'

Barremian Over a year ago

My bad. I forgot to add the setters. I've updated the answer.

Barremian Over a year ago

You need to set the value using the statement this.breadService.sendData = myNum;. It is updated using the Typescript accessors.

Pravu Over a year ago

it is problem because of the position file service?

|

leonmain · Accepted Answer · 2020-05-14 20:03:30Z

5

Seems like you have redundant variable and subscription

Component

let myNum = 1;
sendChanges(myNum) {
    this.breadService.data$.next(myNum);
}

Service

public data$: BehaviorSubject<any> = new BehaviorSubject(this.data);

Sibling component

ngOnInit() {
    this.breadService.data$.subscribe((data) => {
        this.id = data
        console.log(this.id);
    });
}

answered May 14, 2020 at 20:03

leonmain

3441 silver badge4 bronze badges

1 Comment

leonmain Over a year ago

Make sure that you have provided the same instance of breadService for both components

Collectives™ on Stack Overflow

Share Data Between Component

2 Answers 2

6 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related