Angular 6 RxJs: Trying to make an obj as observable to be use in other components

Question

Service

mode: Subject<any> = new Subject<any>();

constructor(public http: HttpClient) {
    this.setMode({ // defaults
        admin: this.admins.includes(localStorage.getItem("email")),
        edit: false,
        dev: false
    });
}

getMode() {
    return this.mode.asObservable();
}

setMode(value) {
    this.mode.next(value);
}

Component

constructor(private bcAuthService: BcAuthService) {}

ngOnInit() {
  this.bcAuthService.getMode().subscribe(mode => {
    console.log('mode: ', mode); // never logs or prints in the template
    this.mode = mode;
  });
}
editToggle(e) {
  this.mode.edit = e.target.checked; // err: cant edit `mode` because it never set.
  this.bcAuthService.mode.next(this.mode);
}

Question

I am trying to set up an Observable to be read and wrote from many components. As seen above; I set up the observable in my service but my component getMode() doesnt work. Any ideas why?

the service works its the getMode that is not working. I cant understand why — Omar, Jun 21 '18 at 18:28
you're updating the `Subject` before you subscribe it. You've to switch it's type to `ReplaySubject` or `BehaviorSubject` to achieve the desired effect. The subjects have different behavior — WildDev, Jun 21 '18 at 18:43

Rubén Soler · Accepted Answer · 2018-06-21T18:51:03.157

4

Your architecture is correct, but I think you should use BehaivourSubject instead of Subject

try this:

import { BehaviorSubject } from 'rxjs/BehaviorSubject';

Service

mode: BehaviorSubject<any> = new BehaviorSubject<any>(null);

    constructor(public http: HttpClient) {
        this.setMode({ // defaults
            admin: this.admins.includes(localStorage.getItem("email")),
            edit: false,
            dev: false
        });
    }

    getMode() {
        return this.mode.asObservable();
    }

    setMode(value) {
        this.mode.next(value);
    }

BehaviorSubject vs Subject

What is the difference between Subject and BehaviorSubject?

edited Jun 21 '18 at 18:51

answered Jun 21 '18 at 18:39

Rubén Soler

1,147
8
23

`mode: BehaviorSubject = new BehaviorSubject();` gets an error `Expected 1 arguments, but got 0.` – Omar Jun 21 '18 at 18:44
1

sorry, the constructor requires an argument but you can pass null, it is fixed in my answer now – Rubén Soler Jun 21 '18 at 18:45
this works. I dont know why though. Would be nice to see an explanation for when to use `Subject` and `BehaviorSubject`... Either way thank you! – Omar Jun 21 '18 at 18:48
you can read more about this here: https://stackoverflow.com/questions/43348463/what-is-the-difference-between-subject-and-behaviorsubject – Rubén Soler Jun 21 '18 at 18:50
The summary is: `Subject` only notify the subscribers and `BehaviorSubject` notify and send the value – Rubén Soler Jun 21 '18 at 18:53

cRAN · Answer 2 · 2018-06-21T19:00:08.697

0

editToggle(e) {
this.mode.edit = e.target.checked; // err: cant edit `mode` because it 
// never set.
this.bcAuthService.setMode(e.target.checked);
}

I guess this should work

I did something similar by modifying a fork Component Interaction.

edited Jun 21 '18 at 19:00

answered Jun 21 '18 at 18:50

cRAN

195
1
2
16

Angular 6 RxJs: Trying to make an obj as observable to be use in other components

Service

Component

Question

2 Answers2