How to create behavior subject for object and subscribe to it on another component?

Question

I created a behaviour subject in a service class.

public personObject: BehaviorSubject<any> =
    new BehaviorSubject<any>({ personId: 1, name: 'john doe' });

On a component that imports this service, i subscribed this behaviour subject like this:

this._subscription.add(
    this._bankService.personObject.subscribe(data => {
        this.personObject = data;
        console.log(data);
    })
);

But I am not able to get exact dataset in the behaviour subject.

Edit I forgot to mention that I used ViewContainerRef to create my sibling component which I added to an answer with a few comments.

Add more info (code) about the service and component classes — Jota.Toledo, Oct 12 '17 at 09:51
To make it simple, I just want to pass an object between sibling components using BehaviorSubject. Just any demo or article that provides information on how to do it will be helpful. Thanks — Prabesh, Oct 12 '17 at 09:57
SO is not a "how to" forum, you come here with a concrete problem and ppl help you. If you cant give us a minimal reproduction of your problem, its hard for anyone to give you advice — Jota.Toledo, Oct 12 '17 at 10:58

Dmitry Grinko · Answer 1 · 2019-12-17T02:13:01.583

13

Service

@Injectable()
export class DataService {

  private _dataListSource: BehaviorSubject<IData[]> = new BehaviorSubject([]);
  dataList: Observable<IData[]> = this._dataListSource.asObservable().distinctUntilChanged();

  getDataList(): Observable<any> {
      return this.httpService.get('/data').map(res => {
          this._dataListSource.next(res);
      });
  }
}

TS file

export class DataComponent implements OnInit {

    public dataList$: Observable<IData[]>;

    constructor(public dataService: DataService) {}

    ngOnInit() {
        this.dataList$ = this.dataService.dataList;
        this.dataService.getDataList().subscribe();
    }
}

HTML file

<div *ngIf="dataList$ | async; let dataList; ">
    <div *ngFor="let data of dataList">
        {{ data | json}}
    </div>
</div>

edited Dec 17 '19 at 02:13

answered Oct 12 '17 at 23:21

Dmitry Grinko

13,806
14
62
86

What does the $ mean in `this.dataList$`? – Sledge Sep 21 '18 at 01:03
3

@Sledge my team is using $ at the end of variable to highlight that it is observable. It's comfortable for us. You can use whatever name you want. – Dmitry Grinko Sep 21 '18 at 01:08

score 1 · Accepted Answer · answered Oct 17 '17 at 06:38

I forgot to mention that I was using I was using ViewContainerRef to create a sibling component and it turns out behavior subject does not work the same way with component created using ViewContainerRef.

Other wise Behaviour subjects of any object work exactly like with number or string. I used @Input to send data to component for now.

score 1 · Answer 3 · edited Mar 22 '23 at 22:23

(Sender) In the component where you change object properties:

import { StoreService } from '../../services/store.service';

constructor(private _storeService: StoreService) {}

ngOnInit(): void {
    let person = { personId: 0, name: '' };
    this._storeService.personObject.subscribe( value => {
      person.personId = value.personId; // set value personId from service
    } );
    this._storeService.order.next({...person, name: 'somebody'  } ); // set new value for name property
  }

(Receptor) In the component where you subscribe to personObject:

import { StoreService } from '../../services/store.service'; // service file with personObject variable

constructor(private _storeService: StoreService) {}

this._storeService.personObject.subscribe( value => {
  console.log(value);
} );

How to create behavior subject for object and subscribe to it on another component?

3 Answers3

Linked