Angular 2 Component listen to change in service

Question

I've a simple question about change detection.

I have a component and a (global) service with a boolean inside. How can I make the component listen to that boolean and execute a function if that boolean changes?

Thanks!

See https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service — Mark Rajcok, Mar 28 '16 at 15:16

Sam Storie · Accepted Answer · 2019-03-26T17:30:17.293

41

Depending on how that boolean changes you could expose it as an Observable<boolean> on your service, and then subscribe to that stream in your component. Your service would look something like:

@Injectable()
export class MyBooleanService {
    myBool$: Observable<boolean>;

    private boolSubject: Subject<boolean>;

    constructor() {
        this.boolSubject = new Subject<boolean>();
        this.myBool$ = this.boolSubject.asObservable();
    }

    ...some code that emits new values using this.boolSubject...
}

Then in your component you would have something like this:

@Component({...})
export class MyComponent {
    currentBool: boolean;

    constructor(service: MyBooleanService) {
        service.myBool$.subscribe((newBool: boolean) => { this.currentBool = newBool; });
    }
}

Now depending on what you need to do with that bool value you may need to do some other things to get your component to update, but this is the gist of using an observable. Note, you will want to unsubscribe from the myBool$ stream at some point to prevent memory leaks and unexpected side effects.

Another option is you use the async pipe within your template instead of explicitly subscribing to the stream in the constructor. That will also ensure the subscription is disposed of automatically. Again though, that depends on what exactly you need to do with the bool values.

edited Mar 26 '19 at 17:30

answered Mar 28 '16 at 12:07

Sam Storie

4,444
4
48
74

3

You can get Subject from rxjs – Sam Storie Jun 02 '16 at 22:50
**UserService.ts** `this._dataService.get(this._userUrl) .subscribe(users => { self.user = Enumerable.from(users).firstOrDefault(e => e.Email == username && password == "1234"); if (!!self.user) { self._isLoggedInSubject.next(true); } });` **Component** `isLoggedIn: boolean; constructor(private _userService: UserService) { this._userService.isLoggedIn.subscribe((response: boolean) => this.isLoggedIn = response); }` didnt work for me – nadav Jun 02 '16 at 23:15
2

@SamStorie Hey, it could be done with 1 line less by declaring the Subject like this: `private boolSubject = new Subject();`. Good work mate! ;) – SrAxi Apr 12 '17 at 14:25
Thanks. It helped me but I used the `Subject` only. Why are you doing `this.myBool$ = this.boolSubject.asObservable();`? For me the code also worked if I make `boolSubject` public and subscribe to it in the other component i.e. `service.boolSubject.subscribe((newBool: boolean) => { this.currentBool = newBool; });`. Any reason you converted the `Subject` to an `Observable`? – Manu Chadha May 23 '18 at 17:37
@ManuChadha It's because I didn't want to expose the Subject type to the client. That would give them the ability to push out new values, and could cause other problems. In general you want to use Subject's to push out values and strictly expose Observables to clients who need to subscribe to them. – Sam Storie May 23 '18 at 18:44
thanks. Well explained. One more related question (sort of). Is there a solution to the problem which uses only `Observables`? I am wondering why I would ever use an `Observable` over a `Subject` as `Subject` seem to be more versatile. I thought I could do `Observable.create(observer=>{...})` but I suppose the complete logic of emitting values has to be in `{...}` block and I cannot emit values from other functions. Am I correct? Why would I use an `Observable` then instead of a `Subject`? – Manu Chadha May 23 '18 at 18:59
1

Answer sets in right direction, but forgets to implement guards against memory leaks. For that just assign the constructed service to a var of type Subscription, i.e. `subscription: Subscription;`, then in constructor set `this.subscription = service.myBool$.subscribe(...)`, then in implemented `ngOnDestroy()` on component, implement `this.subscription.unsubscribe()`; – j4v1 Mar 25 '19 at 15:56

score 17 · Answer 2 · edited Feb 23 '22 at 14:13

The Sam's answer is completely right. I would just want to add that you could also leverage a TypeScript setter to automatically trigger the event for changes:

@Injectable()
export class MyBooleanService {
    myBool$: Observable<boolean>;

    private boolSubject: Subject<boolean>;
    private _myBool: Boolean;

    constructor() {
        this.boolSubject = new Subject<boolean>();
        this.myBool$ = this.boolSubject.asObservable();
    }

    set myBool(newValue) {
      this._myBool = newValue;
      this.boolSubject.next(newValue);
    }
}

Angular 2 Component listen to change in service

2 Answers2

Linked