Variable Change Detection - Angular

Question

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! :)

Since you assign a new value to myVar in the Observable callback, you know when it changes. What other information do you want to get? — Martin Parenteau
– Martin Parenteau, Commented Apr 22, 2018 at 3:35
I want to run a function in MainPage when the value of the variable has been changed. — Brian Moreno
– Brian Moreno, Commented Apr 22, 2018 at 12:57

Martin Parenteau · Accepted Answer · 2018-04-22 14:05:20Z

18

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() {
        ...
    }
}

answered Apr 22, 2018 at 14:05

Martin Parenteau

74k13 gold badges137 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Brian Moreno Over a year ago

Thank you, your example helped a lot! :)

Danielle Over a year ago

Im trying to use your solution, but I get "Parameter 'message' implicitly has an 'any' type". When I do message: any still does not work. Any suggestion? Thanks!

Martin Parenteau Over a year ago

I think that something like subscribe((message: string) => ... would eliminate the error message (assuming that message is a string).

mariane muniz · Accepted Answer · 2020-05-11 00:33:01Z

0

You can try use this: https://angular.io/api/core/OnChanges

and get the object changes with: changes.objectName

more details on the angular.io page.

answered May 11, 2020 at 0:33

mariane muniz

491 bronze badge

1 Comment

Sandeep Kumar Over a year ago

1. Its recommended adding solution as part of your answer along with any external link. 2. Please refer to this for better presenting your question/answer: meta.stackoverflow.com/a/251362/3519504

OuttaSpaceTime · Accepted Answer · 2024-10-09 16:40:21Z

0

You can try use ChangeDetectorRef.

See this example

edited Oct 9, 2024 at 16:40

OuttaSpaceTime

9952 gold badges14 silver badges35 bronze badges

answered Jun 14, 2024 at 17:22

Artur Todeschini

4126 silver badges12 bronze badges

Collectives™ on Stack Overflow

Variable Change Detection - Angular

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related