anguar @input绑定的属性变化

Intercept @Input property change in Angular

Bharat TiwariFollow

Mar 15, 2018

this post is good for Angular 2+

In Angular, for a child component to allow its parent component to pass on some data to it, it needs to provide a binding input property to which the parent component can bind its data to. The child component specifies such binding property by decorating it with @Input() attribute.

 

For example sake, consider an order-processing application that an store associate would use to process orders received.

👆 we have a child component item-details that specifies two properties - item and notifyItemProcessed,(line#9–10), as @Input() properties. This would allow a parent component order to pass on an order item and a reference to a parent’s method that the child component should call when an item has been processed, like below :

 

👆the parent component order assigns its itemSelected property to the child component’s input property item (line# 13) and thus the child component gets a reference to the currently selected item in parent component via its item property.

Similarly, the parent component is also passing a reference to the method that the child component should call when the selected item is processed via the child component’s input property notifyItemProcessed(line#14).

Now, lets say, the child component wants to set the status of the item (passed to it from parent component ) to ‘In Process’ whenever the item selected for processing in the parent component changes. Additionally the child component may also want to reset its internal properties suppliedQuantity, scannedUPC and errors whenever a new item is passed to it. For this, the child component need to know when the value of its input property itemchanges.

Child component has two options to intercept the change to its input properties: 1. Using the typescript’s class member accessors(getter/setter) to define the input property item or 2. Using the angular component’s ngOnChanges event.

1. Using Typescript Accessors (getter/setter)

In the child component class, we can define our @Input property itemusing typescript accessors that would allow us to intercept whenever the property is set to a new value, like shown below:

 

👆 line#12 -22, we defined the item property using typescript accessors. In the setter of the property (line#16–22), we intercept the new value and set its status to ‘In Process’.

Note that we added a new private member _item inside our class to store the value of the property which is accessed using the getter/setter we defined. But the public @Input property being same i.e. item the parent component would continue to bind data to it in the same way as we did above:

<item-details *ngIf="itemSelected"
          [item]="itemSelected" 
          [notifyItemProcessed]="processOrderItems" ></item-details>

2. Using ngOnChanges event

Another option to intercept for any change in any of the input property is to use the Angular’s ngOnChanges event:

 

👆 Line# 30–38, we are using ngOnChanges event to intercept any change in the input properties. Note that this event will be triggered when any of the input bound properties change. The ngOnChanges event method would receive an object of type SimpleChanges object that would give us each of the property that has changed as SimpleChange object containing the property’s previousValue and CurrentValue. The SimpleChange object also provides isFirstChange() function that can be used to verify if its the first time the property value has changed.

Here is the plunkr example of the above two approaches:

Angular parent-child Component Communication using @Input() - Plunker
Created on Plnkr: Helping developers build the web.embed.plnkr.co

So, which one is to use of the two options? Cannot say one should be preferred over other. Both options work good. I found that with Typescript Accessor, I was required to use ChangeDetectorRef.detectChanges()to trigger the change if I use the property in some Angular expression on the template. With ngOnChanges it was handled by Angular. So I guess I would use ngOnChanges mostly because its more Angular in-built, but the Typescript Accessor approach would be useful when there is some customization need to be done to the property value when its being read(get).