Angular Lifecyclehook ngOnChanges

Question

I want to update a variable each time after it changes in angular view.

How can it be achieved in angular without using @input decorator?

I have tried but it wont updated.But i haven't used @input decorator. — sabin shrestha, Mar 21 '18 at 10:13
Why not use [`ngModelChange`](https://angular.io/guide/template-syntax#inside-ngmodel) with a `ngModel` binding for whatever input you are having. — cyberpirate92, Mar 21 '18 at 11:13

score 0 · Answer 1 · answered Mar 21 '18 at 10:15

If your variable is called title in your component then you can do this:

  this.title.valueChanges
      .debounceTime(500)
      .distinctUntilChanged()
      .subscribe (newValue => {
        // do something based on the newvalue 
    });

However, you now have a subscriber that will fire every time the title changes. So you should really destroy it at some point, or you will get memory leak/stack overflow eg:

this.title.valueChanges
      .debounceTime(500)
      .distinctUntilChanged()
      .takeUntil(this.destroyValueChanges$)
      .subscribe (newValue => {
        // do something based on the newvalue 
    });

Delcare destroyValueChanges$ as a Subject property of your component and in ngOnDestroy call destroyValueChanges$.next();

NOTE

Since you did not post any code, I have to guess what you are asking. I am assuming that title is an <input> on your template, in which the user is typing and hence that is how the value is changing. If the variable you are talking about is being changed 'outside' your component, then it needs to be have an @Input decorator and you need to use the ngOnChanges life-cycle hook.

Angular Lifecyclehook ngOnChanges

1 Answers1