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

<video-list *ngIf="category" [categoryId]="category.id"></video-list>

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?

Answer 1

Actually, there are two ways of detecting and acting upon when an input changes in the child component in angular2+ :

1. 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

2. 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.

1. 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.

2. 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.

Answer 2

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.

Answer 3

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);
}

Answer 4

@Input() set categoryId(categoryId: number) {
      console.log(categoryId)
}

please try using this method. Hope this helps

Answer 5

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<number>();
    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 => {
          **Process Value Updates Here**
      }
    }
  
  selectChat(thread_id: number) {  <--- 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.

Answer 6

Angular ngOnChanges

The ngOnChanges() is an inbuilt Angular callback method that is invoked immediately after the default change detector has checked data-bound properties if at least one has changed. Before the view and content, children are checked.

// child.component.ts

import { Component, OnInit, Input, SimpleChanges, OnChanges } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit, OnChanges {

  @Input() inputParentData: any;

  constructor() { }

  ngOnInit(): void {
  }

  ngOnChanges(changes: SimpleChanges): void {
    console.log(changes);
  }

}

for more: Angular Docs

Answer 7

export class ChildComponent implements OnChanges {
  @Input() categoryId: string;

  ngOnChanges(changes: SimpleChanges) {
    if (changes.categoryId) { // also add this check 
      console.log('Input data changed:', this.categoryId);
    }
  }
}

When the input is changed, changedetection calls ngOnChanges. changes: SimpleChanges object has all the changes done. Check if categoryId is one of the changes happened. If yes, do what you need to do.

Answer 8

I'd stick to approach, suggested by @alan-c-s, but with some modifications. First - I'm against using ngOnChanges. Instead, I propose to move all what needs to be changed under one object. And use BehaviorSubject to track it changes:

  private location$: BehaviorSubject<Maps.Location> = new BehaviorSubject<Maps.Location>(null);

  @Input()
  set location(value: Maps.Location) {
    this.location$.next(value);
  }
  get location(): Maps.Location {
    return this.location$.value;
  }

<map
    *ngIf="isInteger(form.get('addressId').value)"
    [location]="{
      gpsLatitude: form.get('address.gpsLatitude').value,
      gpsLongitude: form.get('address.gpsLongitude').value,
      country: form.get('address.country').value,
      placeName: form.get('address.placeName').value,
      postalZip: form.get('address.postalZip').value,
      streetName: form.get('address.streetName').value,
      houseNumber: form.get('address.houseNumber').value
    }"
>
</map>

Answer 9

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.

Answer 10

None of the answers seem to be the best solution. They are overly-complicated even if they do ultimately work.

All that you need to do is use a get-set pattern, also known as "auto-properties", on the input variable like the following:

    ...
    private _categoryId: number;

    @Input()
    set categoryId(value: number) {
      this._categoryId = value;
      // Do or call whatever you want when this input value changes here
    }
    get categoryId(): number {
      return this._categoryId;
    }
    ...

Then anywhere else in the code, this can be referenced as this.categoryId because the getter automatically gets called when referencing that in TypeScript.

Further reading:

• https://www.typescripttutorial.net/typescript-tutorial/typescript-getters-setters/
• https://dev.to/deerawan/3-different-ways-to-use-input-decorator-4b3c
• https://angular.io/guide/component-interaction#intercept-input-property-changes-with-a-setter

Answer 11

Here ngOnChanges will trigger always when your input property changes:

ngOnChanges(changes: SimpleChanges): void {
 console.log(changes.categoryId.currentValue)
}

Answer 12

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<any> = new ReplaySubject(1);

CategoryComponent.ts

public onCategoryChange(): void {
  service.categoryChange$.next();
}

videoListComponent.ts

public ngOnInit(): void {
  service.categoryChange$.subscribe(() => {
   // do your logic
  });
}

Answer 13

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()
• You can observe any class field this way.

Example usage:

@Input()
num: number;
@Input()
str: number;
fields = observeFields(this); // <- call our utility function

constructor() {
  this.fields.str.subscribe(s => console.log(s));
}

Utility functions:

import { BehaviorSubject, Observable, shareReplay } from 'rxjs';

const observeField = <T, K extends keyof T>(target: T, key: K) => {
  const subject = new BehaviorSubject<T[K]>(target[key]);
  Object.defineProperty(target, key, {
    get: () => subject.getValue() as T[K],
    set: (newValue: T[K]) => {
      if (newValue !== subject.getValue()) {
        subject.next(newValue);
      }
    }
  });
  return subject;
};

export const observeFields = <T extends object>(target: T) => {
  const subjects = {} as { [key: string]: Observable<any> };
  return new Proxy(target, {
    get: (t, prop: string) => {
      if (subjects[prop]) { return subjects[prop]; }
      return subjects[prop] = observeField(t, prop as keyof T).pipe(
        shareReplay({refCount: true, buffer:1}),
      );
    }
  }) as Required<{ [key in keyof T]: Observable<NonNullable<T[key]>> }>;
};

Demo

Answer 14

 @Input() public set categoryId(id: number) {
    if (id) {
    console.log(id)
    }
 }

Answer 15

You could also just pass an EventEmitter as Input. Not quite sure if this is best practice tho...

CategoryComponent.ts:

categoryIdEvent: EventEmitter<string> = new EventEmitter<>();

- OTHER CODE -

setCategoryId(id) {
 this.category.id = id;
 this.categoryIdEvent.emit(this.category.id);
}

CategoryComponent.html:

<video-list *ngIf="category" [categoryId]="categoryIdEvent"></video-list>

And in VideoListComponent.ts:

@Input() categoryIdEvent: EventEmitter<string>
....
ngOnInit() {
 this.categoryIdEvent.subscribe(newID => {
  this.categoryId = newID;
 }
}

Answer 16

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<number> = new BehaviorSubject(0);

}

some.component.ts

constructor(private dataApiFacade: DataApiFacade){}

ngOnInit(): void {
  this.dataApiFacade.currentTabIndex
    .pipe(takeUntil(this.destroy$))
       .subscribe(value => {
          if (value) {
             this.currentTabIndex = value;
          }
    });
}

setTabView(event: MatTabChangeEvent) {
  this.dataApiFacade.currentTabIndex.next(event.index);
}

ngOnDestroy() {
  this.destroy$.next(true);
  this.destroy$.complete();
}

Answer 17

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.

Answer 18

You can use the ngOnChanges() lifecycle method

@Input() inputValue: string;

ngOnChanges(changes: SimpleChanges) {
    console.log(changes['inputValue'].currentValue);
}

Answer 19

If you're dealing with the case that your are using @Input to share data between parent and child component, you can detect @Input data changes by using the lifecycle method: ngOnChanges

 ngOnChanges(changes: SimpleChanges) {
    if (!changes.categoryId.firstChange) {
      // only logged upon a change after rendering
      console.log(changes.categoryId.currentValue);
    }
  }

And I'm advising that you should care of the change strategy implemented for the child component you should add ChangeDetectionStrategy.OnPush for some performance reason :

Example-Code :

@Component({
  selector: 'app-hero-detail',
  templateUrl: './hero-detail.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class VideoListComponent implements OnChanges {
  @Input() categoryId: string;

Answer 20

Starting with Angular 17 you can use signals, which are in developer preview.

So you could write your video-list component like this

import { Component, input } from '@angular/core';
import { toObservable, toSignal } from '@angular/core/rxjs-interop';
import { switchMap } from 'rxjs';

@Component({})
export class VideoList {
  categoryId = input.required<string>();
  videos = toSignal(toObservable(this.categoryId).pipe(
    switchMap(id => this.apiService.fetch(id))
  ));
  constructor (private apiService: MyApiService) {}
}

Answer 21

So I wanted to create a custom directive for the so I can standardize my error messages like this:

<mat-error FormError [control]="formgroup.get('mycontrol') name="Streetaddress"></mat-error>

I ended up reading a lot of community input and ended up using the ngDoCheck function. The code below is a very crude example but it works. It could be improved upon by e.g. checking if there actual was a change.

import {Directive, DoCheck, ElementRef, HostListener, Input} from '@angular/core';
import {AbstractControl} from "@angular/forms";
import {FormErrorSupportService} from "./form-error-support.service";

@Directive({
  selector: '[FormError]'
})
export class FormErrorDirective  implements  DoCheck{
  @Input() control:AbstractControl;
  @Input() name: string;

  @HostListener('change') logChange() {this.detectChanges(); }

  constructor(
    private el: ElementRef
  ) {

  }

  detectChanges(): void {
    if (this.control.invalid) {
      this.el.nativeElement.style.display = 'block';
      this.el.nativeElement.innerHTML = FormErrorSupportService.report(this.control, this.name);
    }
    else {
      this.el.nativeElement.innerHTML = ''
    }

  }

  ngDoCheck(): void {
    console.log(`change detection`);
    this.detectChanges();
  }


}

The FormErrorSupportService has a static method that will actually construct the error text based on the error property. Messages are in dutch, but you'll get the gist.

import { Injectable } from '@angular/core';
import {AbstractControl} from "@angular/forms";

@Injectable({
  providedIn: 'root'
})
export class FormErrorSupportService {

  constructor() { }

  public static report(control: AbstractControl, name: string): string {
    console.log(`${name}: `, control?.errors);

    if (control === null ) { return '';}
    if (control.valid) { return '';}

    if (control.hasError('required')) {
      return $localize`Het veld ${name} mag niet leeg zijn.`;
    }
    else if (control.hasError('min')) {
      return $localize`Het veld ${name} moet een minimale waarde van ${control.errors['min'].min} hebben.`;
    }
    else if (control.hasError('max')) {
      return $localize`Het veld ${name} moet een maximale waarde van ${control.errors['max'].max} hebben.`;
    }
    else if (control.hasError('pattern')) {
      return $localize`Het veld ${name} voldoet niet aan het gewenste patroon.`;
    }
    else if (control.hasError('maxlength')) {
      return $localize`Het veld ${name} mag maximaal ${control.errors['maxlength'].requiredLength} tekens lang zijn.`;
    }
    else if (control.hasError('minlength')) {
      return $localize`Het veld ${name} moet minimale lengte van ${control.errors['minlength'].requiredLength} tekens zijn.`;
    }
    else {
      return 'error?';
    }

  }
}

Answer 22

With signal-based inputs you can get the passed value as a signal. This allows you to use a computed function where you can reactively perform the filtering logic:

categoryId = input<string>();
videos = computed(() => {
  const categoryId = this.categoryId();
  return videos.filter(video => video.categoryId === categoryId);
});

Answer 23

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) => {
  this.changeDetector.markForCheck();
});

the markForCheck() writen because of using in this declare:

changeDetection: ChangeDetectionStrategy.OnPush