change detection of property in Angular

Question

In app.component.ts, I have a property called current.

export class appComponent {
  current = 0;
}

In some of my methods I changed this property

previous() {
  this.current -= 1
}
next() {
  this.current += 1
}

Now, I want to run a set of command when current property is changed. I can do it by appending those command after changes.

previous() {
  this.current -= 1;
  this.runCommands();

}
next() {
  this.current += 1;
  this.runCommands();
}

Everything works just fine. But see, it seems very messy calling this method every time this property changes. What I want to do run a change detection function what run my command like:

this.current.valueChanges.subscribe(() => this.runCommand());

is it possible with any simpler way in angular?

Thanks in advance

JamieT · Accepted Answer · 2019-09-06 17:44:35Z

6

You would want to make current an Observable via a BehaviorSubject. Ideally, these would exist in an injectable service and then the components that rely on the value of current would be subscribed via the injected service.

Setting up the Observable would look like

   private _current = new BehaviorSubject<number>(0);
   public readonly current = this._current.asObservable();

and then we can subscribe to current in the components (in this example, the one it lives in) that need to like

   this.current.subscribe(val => {
        // do stuff here
    })

Any time we wish to change the value of current and fire the event for anything subscribed to it we do this like

    this._current.next(123);  // anything subscribed receives the value of 123

You can do this in your component, but the best practice is to put the Observable in your service layer.

To achieve your desired use case of incrementing the value by 1 or -1, the BehaviorSubject function getValue() will come in handy by telling you the current value stored in the Observable.

    this._current.next(++this._current.getValue()) // increment 1
    this._current.next(--this._current.getValue()) // increment -1
    // etc...

edited Sep 6, 2019 at 17:44

answered Sep 6, 2019 at 17:21

JamieT

1,1871 gold badge10 silver badges20 bronze badges

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

2 Comments

Md Rafee Over a year ago

Thank you very much for your clean answer. It saved my day

drowhunter Over a year ago

Even better use setters and getters. public set current(value: int) { _current.next(value);} public get current () { return this._current.getValue(); }

Collectives™ on Stack Overflow

change detection of property in Angular

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related