I'm fairly new to Angular, I work mainly with VueJS. I want to know how I can detect when a variable gets updated. I'm updating my variable through a DataService. I read about ngOnChanges()
but I saw that this only works for inputs.
This is pretty much my code:
import { DataService } from "../../service/my.service";
export class MainPage {
myVar: String = ""; // this is the variable I want to listen when a change is made
constructor (
private data: DataService
) {}
ngOnInit() {
this.data.changeVar.subscribe(message => this.myVar = message);
}
}
my.service
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
@Injectable()
export class DataService {
private messageSource = new BehaviorSubject<string>("");
changeVar = this.messageSource.asObservable();
constructor() { }
changeMyVar (message: string) {
this.messageSource.next(message)
}
}
This is where I'm updating the variable.
import { DataService } from "../../service/my.service";
export class AnotherPage {
anotherVar: String = '';
constructor(
private data: DataService
) { }
ngOnInit() {
this.data.changeVar.subscribe(message => this.anotherVar = message)
}
myFunction () {
this.data.changeMyVar("Hello"); // update variable to "Hello"
}
}
Any help is greatly appreciated! :)
If myVar
is changed only in the Observable callback defined in ngOnInit
, you can call a method after changing the variable:
export class MainPage {
myVar: string = "";
ngOnInit() {
this.data.changeVar.subscribe(message => {
if (message !== this.myVar) {
this.myVar = message;
this.doSomething();
}
});
}
private doSomething() {
...
}
}
On the other hand, if myVar
can be changed in other places (since it is public), you can access it in a getter/setter, and call the method in the setter:
export class MainPage {
private _myVar: string = "";
get myVar(): string {
return this._myVar;
}
set myVar(value: string) {
if (value !== this._myVar) {
this._myVar = value;
this.doSomething();
}
}
ngOnInit() {
this.data.changeVar.subscribe(message => this.myVar = message);
}
private doSomething() {
...
}
}