What is the Angular equivalent to an AngularJS watch

Question

In AngularJS you were able to specify watchers to observe changes in scope variables using the  watch function of the  scope  What is the equivalent of watching for variable changes  in  for example  component variables  in Angular

User · Accepted Answer

In Angular 2  change detection is automatic     scope  watch   and  scope  digest   R I P   Unfortunately  the Change Detection section of the dev guide is not written yet  there is a placeholder near the bottom of the Architecture Overview page  in section  The Other Stuff     Here s my understanding of how change detection works    Zone js  monkey patches the world  -- it intercepts all of the asynchronous APIs in the browser  when Angular runs    This is why we can use setTimeout   inside our components rather than something like  timeout    because setTimeout   is monkey patched  Angular builds and maintains a tree of  change detectors    There is one such change detector  class  per component directive    You can get access to this object by injecting ChangeDetectorRef    These change detectors are created when Angular creates components   They keep track of the state of all of your bindings  for dirty checking  These are  in a sense  similar to the automatic  watches   that Angular 1 would set up for      template bindings Unlike Angular 1  the change detection graph is a directed tree and cannot have cycles  this makes Angular 2 much more performant  as we ll see below   When an event fires  inside the Angular zone   the code we wrote  the event handler callback  runs   It can update whatever data it wants to -- the shared application model state and or the component s view state  After that  because of the hooks Zone js added  it then runs Angular s change detection algorithm   By default  i e   if you are not using the onPush change detection strategy on any of your components   every component in the tree is examined once  TTL 1     from the top  in depth-first order    Well  if you re in dev mode  change detection runs twice  TTL 2    See ApplicationRef tick   for more about this    It performs dirty checking on all of your bindings  using those change detector objects    Lifecycle hooks are called as part of change detection   If the component data you want to watch is a primitive input property  String  boolean  number   you can implement ngOnChanges   to be notified of changes   If the input property is a reference type  object  array  etc    but the reference didn t change  e g   you added an item to an existing array   you ll need to implement ngDoCheck    see this SO answer for more on this    You should only change the component s properties and or properties of descendant components  because of the single tree walk implementation -- i e   unidirectional data flow    Here s a plunker that violates that   Stateful pipes can also trip you up here   For any binding changes that are found  the Components are updated  and then the DOM is updated   Change detection is now finished  The browser notices the DOM changes and updates the screen    Other references to learn more    Angular   s  digest is reborn in the newer version of Angular - explains how the ideas from AngularJS are mapped to Angular Everything you need to know about change detection in Angular - explains in great detail how change detection works under the hood Change Detection Explained - Thoughtram blog Feb 22  2016 - probably the best reference out there Savkin s Change Detection Reinvented video - definitely watch this one How does Angular 2 Change Detection Really Work - jhade s blog Feb 24  2016 Brian s video and Mi  ko s video about Zone js   Brian s is about Zone js   Mi  ko s is about how Angular 2 uses Zone js to implement change detection   He also talks about change detection in general  and a little bit about onPush  Victor Savkins blog posts  Change Detection in Angular 2  Two phases of Angular 2 applications  Angular  Immutability and Encapsulation   He covers a lot of ground quickly  but he can be terse at times  and you re left scratching your head  wondering about the missing pieces  Ultra Fast Change Detection  Google doc  - very technical  very terse  but it describes sketches the ChangeDetection classes that get built as part of the tree

User · Answer

If you want to make it 2 way binding  you can use   yourVar    but you have to implement yourVarChange event and call it everytime your variable change    Something like this to track the hero change    Output   heroChange   new EventEmitter      and then when your hero get changed  call this heroChange emit this hero    the   hero   binding will do the rest for you  see example here    http   plnkr co edit efOGIJ0POh1XQeRZctSx p preview

User · Answer

This does not answer the question directly  but I have on different occasions landed on this Stack Overflow question in order to solve something I would use  watch for in angularJs  I ended up using another approach than described in the current answers  and want to share it in case someone finds it useful   The technique I use to achieve something similar  watch is to use a BehaviorSubject  more on the topic here  in an Angular service  and let my components subscribe to it in order to get  watch  the changes  This is similar to a  watch in angularJs  but require some more setup and understanding   In my component   export class HelloComponent     name  string       inject our service  which holds the object we want to watch    constructor private helloService  HelloService          Here I am  watching  for changes by subscribing     this helloService getGreeting   subscribe  greeting   gt          this name   greeting value                  In my service  export class HelloService     private helloSubject   new BehaviorSubject lt  value  string  gt   value   hello       constructor          similar to using  watch  in order to get updates of our object    getGreeting    Observable lt  value string  gt        return this helloSubject           Each time this method is called  each subscriber will receive the updated greeting    setGreeting greeting  string        this helloSubject next  value  greeting            Here is a demo on Stackblitz

User · Answer

Here is another approach using getter and setter functions for the model    Component     selector   input-language     template             lt input      type  text       placeholder  Language         ngModel    query       gt          export class InputLanguageComponent      set query value        this  query   value      console log  query set to     value         get query         return this  query

User · Answer

This behaviour is now part of the component lifecycle    A component can implement the ngOnChanges method in the OnChanges interface to get access to input changes   Example   import  Component  Input  OnChanges  from  angular2 core      Component     selector   hero-comp     templateUrl   app components hero-comp hero-comp html     styleUrls    app components hero-comp hero-comp css      providers        directives         pipes        inputs   hero    real      export class HeroComp implements OnChanges     Input   hero Hero     Input   real string    constructor           ngOnChanges changes          console log changes

User · Answer

If  in addition to automatic two-way binding  you want to call a function when a value changes  you can break the two-way binding shortcut syntax to the more verbose version    lt input   ngModel    yourVar  gt  lt  input gt   is shorthand for   lt input  ngModel   yourVar   ngModelChange   yourVar  event  gt  lt  input gt    see e g  http   victorsavkin com post 119943127151 angular-2-template-syntax   You could do something like this    lt input   ngModel    yourVar   ngModelChange   changedExtraHandler  event   gt  lt  input gt

User · Answer

Try this when your application still demands  parse   eval   watch like behavior in Angular  https   github com vinayk406 angular-expression-parser

User · Answer

You can use getter function or get accessor to act as watch on angular 2   See demo here   import  Component  from  angular2 core     Component        Declare the tag name in index html to where the component attaches   selector   hello-world         Location of the template for this component   template       lt button  click   OnPushArray1    gt Push 1 lt  button gt     lt div gt      I m array 1    array1   json       lt  div gt     lt button  click   OnPushArray2    gt Push 2 lt  button gt     lt div gt      I m array 2    array2   json       lt  div gt    I m concatenated    concatenatedArray   json       lt div gt      I m length of two arrays    arrayLength   json       lt  div gt      export class HelloWorld       array1  any             array2  any              get concatenatedArray    any           return this array1 concat this array2              get arrayLength    number         return this concatenatedArray length             OnPushArray1             this array1 push this array1 length              OnPushArray2             this array2 push this array2 length

[angularjs] What is the Angular equivalent to an AngularJS $watch?

Examples related to angularjs

Examples related to angular

Examples related to watch

Examples related to angular2-changedetection