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!
1
-
2See angular.io/docs/ts/latest/cookbook/…Mark Rajcok– Mark Rajcok2016-03-28 15:16:43 +00:00Commented Mar 28, 2016 at 15:16
Add a comment
|
2 Answers
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.
answered Mar 28, 2016 at 12:07
7 Comments
Sam Storie
You can get Subject from rxjs
nadav
UserService.ts
this._dataService.get<IUser[]>(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
SrAxi
@SamStorie Hey, it could be done with 1 line less by declaring the Subject like this:
private boolSubject = new Subject<boolean>();. Good work mate! ;)
Manu Chadha
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?
j4v1
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(); |
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);
}
}
answered Mar 28, 2016 at 12:42
