handle json type data binding Angular 4

Question

What is the best to handle reference type data, for example json data, bind to a component. For example,

<my-component [data]="jsonData"></my-component>

where in .ts jsonData= {'key1':'value1','key2','value2'}

Now if on button click I change my jsonData as {'key1':'valueX','key2','value2'}

Angular won't be able to detect this change, hence doesn't run ngOnChanges(),because angular only checks reference of the data-binding changed or not as a result view won't be refreshed. How should I deal with it?

I can put logic to refresh my view in ngDoCheck() but it is called a lot of times. If json is large, then processing it each time ngDoCheck runs can be an expensive operation.

One possible solution I could think of is to make a service for that component, and on button click, pass the new json to that service, service will publish that event with changed data to my component and component, listening for the events of service, will refresh the view with that new data.

Is there any easier way to handle JSON/Array changes bind to component?

No, but is it going to call ngOnChanges() so that I can update my view? — emkay
– emkay, Commented Jul 25, 2018 at 13:48

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

You can use a setter for @Input property in your component.

Intercept input property changes with a setter

Use an input property setter to intercept and act upon a value from the parent.

@Input() set data(jsondata: any) {
   this._data = jsondata;
}

Refer to the documentation here for more details.

Update after comments:

Yes you can implement ngOnChanges as well for this, as the documentation states:

You may prefer this approach to the property setter when watching multiple, interacting input properties.

See the below example from the documentation,

export class MyComponent implements OnChanges {

   ngOnChanges(changes: {[propKey: string]: SimpleChange}) {
      for (let propName in changes) {
         let changedProp = changes[propName];

         let to = JSON.stringify(changedProp.currentValue);
         if (changedProp.isFirstChange()) {
             console.log(`Initial value of ${propName} set to ${to}`);
         } else {
             let from = JSON.stringify(changedProp.previousValue);
             console.log(`${propName} changed from ${from} to ${to}`);
         }
      }
   }
}

You can get hold of the old and new values of your members using previousValue and the currentValue properties respectively.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jul 25, 2018 at 4:11

Senal

1,6202 gold badges16 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

emkay Over a year ago

It solved my issue. Thanks. So when should one go for ngOnChanges() and this approach?

Collectives™ on Stack Overflow

handle json type data binding Angular 4

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related