How to detect when an Input value changes in Angular

Question

I have a parent component  CategoryComponent   a child component  videoListComponent  and an ApiService   I have most of this working fine i e  each component can access the json api and get its relevant data via observables   Currently video list component just gets all videos  I would like to filter this to just videos in a particular category  I achieved this by passing the categoryId to the child via  Input     CategoryComponent html   lt video-list  ngIf  category   categoryId   category id  gt  lt  video-list gt    This works and when the parent CategoryComponent category changes then the categoryId value gets passed through via  Input   but I then need to detect this in VideoListComponent and re-request the videos array via APIService  with the new categoryId    In AngularJS I would have done a  watch on the variable  What is the best way to handle this

User · Answer

I just want to add that there is another Lifecycle hook called DoCheck that is useful if the @Input value is not a primitive value.

I have an Array as an Input so this does not fire the OnChanges event when the content changes (because the checking that Angular does is 'simple' and not deep so the Array is still an Array, even though the content on the Array has changed).

I then implement some custom checking code to decide if I want to update my view with the changed Array.

User · Answer

I was getting errors in the console as well as the compiler and IDE when using the SimpleChanges type in the function signature  To prevent the errors  use the any keyword in the signature instead  ngOnChanges changes  any        console log changes myInput currentValue      EDIT  As Jon pointed out below  you can use the SimpleChanges signature when using bracket notation rather than dot notation  ngOnChanges changes  SimpleChanges        console log changes  myInput   currentValue

User · Answer

You can use a BehaviorSubject within a facade service then subscribe to that subject in any component and when an event happens to trigger a change in data call  next   on it  Make sure to close out those subscriptions within the on destroy lifecycle hook  data-api facade ts  Injectable     providedIn   root     export class DataApiFacade    currentTabIndex  BehaviorSubject lt number gt    new BehaviorSubject 0       some component ts constructor private dataApiFacade  DataApiFacade     ngOnInit    void     this dataApiFacade currentTabIndex      pipe takeUntil this destroy            subscribe value   gt              if  value                 this currentTabIndex   value                         setTabView event  MatTabChangeEvent      this dataApiFacade currentTabIndex next event index      ngOnDestroy       this destroy  next true     this destroy  complete

User · Answer

Actually  there are two ways of detecting and acting upon when an input changes in the child component in angular2     You can use the ngOnChanges   lifecycle method as also mentioned in older answers        Input   categoryId  string               ngOnChanges changes  SimpleChanges                     this doSomething changes categoryId currentValue              You can also use categoryId previousValue and             categoryId firstChange for comparing old and new values                      Documentation Links  ngOnChanges  SimpleChanges  SimpleChange Demo Example  Look at this plunker  Alternately  you can also use an input property setter as follows       private  categoryId  string            Input   set categoryId value  string                this  categoryId   value         this doSomething this  categoryId                       get categoryId    string                return this  categoryId              Documentation Link  Look here  Demo Example  Look at this plunker  WHICH APPROACH SHOULD YOU USE  If your component has several inputs  then  if you use ngOnChanges    you will get all changes for all the inputs at once within ngOnChanges    Using this approach  you can also compare current and previous values of the input that has changed and take actions accordingly  However  if you want to do something when only a particular single input changes  and you don t care about the other inputs   then it might be simpler to use an input property setter  However  this approach does not provide a built in way to compare previous and current values of the changed input  which you can do easily with the ngOnChanges lifecycle method   EDIT 2017-07-25  ANGULAR CHANGE DETECTION MAY STILL NOT FIRE UNDER SOME CIRCUMSTANCES Normally  change detection for both setter and ngOnChanges will fire whenever the parent component changes the data it passes to the child  provided that the data is a JS primitive datatype string  number  boolean   However  in the following scenarios  it will not fire and you have to take extra actions in order to make it work   If you are using a nested object or array  instead of a JS primitive data type  to pass data from Parent to Child  change detection  using either setter or ngchanges  might not fire  as also mentioned in the answer by user  muetzerich  For solutions look here   If you are mutating data outside of the angular context  i e   externally   then angular will not know of the changes  You may have to use ChangeDetectorRef or NgZone in your component for making angular aware of external changes and thereby triggering change detection  Refer to this

User · Answer

Use the ngOnChanges   lifecycle method in your component      ngOnChanges is called right after the data-bound properties have been   checked and before view and content children are checked if at least   one of them has changed    Here are the Docs

User · Answer

Here ngOnChanges will trigger always when your input property changes  ngOnChanges changes  SimpleChanges   void    console log changes categoryId currentValue

User · Answer

Basically both suggested solutions work fine in most cases  My main negative experience with ngOnChange   is the lack of type safety  In one of my projects I did some renaming  following which some of the magic strings remained unchanged  and the bug of course took some time to surface  Setters do not have that issue  your IDE or compiler will let you know of any mismatch

User · Answer

If you don t want use ngOnChange implement og onChange   method  you can also subscribe to changes of a specific item by valueChanges event  ETC  myForm   new FormGroup     first  new FormControl         this myForm valueChanges subscribe  formValue    gt      this changeDetector markForCheck         the markForCheck   writen because of using in this declare  changeDetection  ChangeDetectionStrategy OnPush

User · Answer

The safest bet is to go with a shared service instead of a  Input parameter  Also   Input parameter does not detect changes in complex nested object type  A simple example service is as follows   Service ts  import   Injectable   from   angular core   import   Subject   from  rxjs Subject     Injectable   export class SyncService        private thread id   new Subject lt number gt         thread id    this thread id asObservable         set thread id thread id  number            this thread id next thread id              Component ts  export class ConsumerComponent implements OnInit      constructor      public sync  SyncService            this sync thread id  subscribe thread id   gt                Process Value Updates Here                      selectChat thread id  number      lt --- How to update values     this sync set thread id thread id           You can use a similar implementation in other components and all your compoments will share the same shared values

User · Answer

You could also just pass an EventEmitter as Input  Not quite sure if this is best practice tho    CategoryComponent ts  categoryIdEvent  EventEmitter lt string gt    new EventEmitter lt  gt      - OTHER CODE -  setCategoryId id     this category id   id   this categoryIdEvent emit this category id      CategoryComponent html   lt video-list  ngIf  quot category quot   categoryId   quot categoryIdEvent quot  gt  lt  video-list gt   And in VideoListComponent ts   Input   categoryIdEvent  EventEmitter lt string gt       ngOnInit      this categoryIdEvent subscribe newID   gt      this categoryId   newID

User · Answer

This solution uses a proxy class and offers the following advantages   Allows the consumer to leverage the power of RXJS More compact than other solutions proposed so far More typesafe than using ngOnChanges    Example usage   Input   public num  number  numChanges    observeProperty this as MyComponent   num     Utility function  export function observeProperty lt T  K extends keyof T gt  target  T  key  K      const subject   new BehaviorSubject lt T K  gt  target key      Object defineProperty target  key        get    T K    return subject getValue           set newValue  T K    void         if  newValue     subject getValue              subject next newValue                         return subject

User · Answer

Input   set categoryId categoryId  number          console log categoryId     please try using this method  Hope this helps

User · Answer

You can also   have an observable which triggers on changes in the parent component CategoryComponent  and do what you want to do in the subscribtion in the child component   videoListComponent  service ts public categoryChange    ReplaySubject lt any gt    new ReplaySubject 1    CategoryComponent ts public onCategoryChange    void     service categoryChange  next       videoListComponent ts public ngOnInit    void     service categoryChange  subscribe      gt          do your logic

[angular] How to detect when an @Input() value changes in Angular?

Examples related to angular

Examples related to angular2-changedetection