Angular @Input binding using function calling multiple times

Question

I'm using Angular 8.

I have a child component with one @Input() property. This input has to be modified before binding and thus using method to return the data for binding like

<app-child [info]="getInfo()"></app-child>

And in the parent component, the getInfo() returns value like

getInfo(): any|null {
  console.log('called...');

  if (this.data) {
    return JSON.parse(this.data);
  }

  return null;
}

But this way, the method is called again and again whenever some event occurs in the child component.

Stackblitz example: https://stackblitz.com/edit/angular-child-com

Produce issue:

The form is rendered from the child component which accepts input from a method as described above.

Click on any button or input field and you can see the console log printing string from the method call with each event.

This is resulting in multiple times OnChange event trigger in the child components.

That's expected. Angular has no idea of what getInfo() might return. So it calls it at each detection change. And you always create and return a new object, so it binds that new object every time. Parse the data once and for all, store the result in a field, and pass that field as input. — JB Nizet
– JB Nizet, Commented Jan 10, 2020 at 17:59
Angular's default change detection strategy checks for all the @Input bound properties in every change detection cycle. So avoid calling methods while binding the value to @Input property — Amit Chigadani
– Amit Chigadani, Commented Jan 10, 2020 at 18:23
You can also use changeDetection: [onPush] and invoke change detection explicitly. — Kashyap
– Kashyap, Commented Jul 30, 2021 at 13:36

Lars Gyrup Brink Nielsen · Accepted Answer · 2021-10-24 06:02:21Z

2

You should retrieve the data and store it in a property in the parent component that you then pass to data binding with the child component. Angular will take care of the change detection

@Component({
  selector: 'app-parent',
  template: '<app-child [info]="info"></app-child>',
})
export class ParentComponent implements OnInit {
  info;

  constructor(private service: SomeDataService) {}

  ngOnInit() {
    this.info = this.service.getData();
  }
}

edited Oct 24, 2021 at 6:02

answered Jan 10, 2020 at 18:13

Lars Gyrup Brink Nielsen

4,1352 gold badges37 silver badges35 bronze badges

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

2 Comments

Marc K Over a year ago

But what if you need a parameter? So you have an array which needs to be filtered based on another array's selected value, and these arrays are dynamically created. So this.info(arrVal, itemId);

Lars Gyrup Brink Nielsen Over a year ago

That can be done in a setter or using an Angular Pipe. Another option is an observable which I would recommend anyways for most data glue code in an Angular application.

Adam Dunkerley · Accepted Answer · 2020-01-10 22:09:08Z

1

Go stateless with async pipes. I think this is closer to what you want to do anyway. I use async pipes wherever possible because its cleaner than using properties for everything -- less unintended consequences too.

@Component({
  selector: 'app-parent',
  template: '<app-child [info]="info$ | async"></app-child>',
})
export class ParentComponent implements OnInit {
  info$ = this.service.getData().pipe(
    map(data => JSON.parse(data))
  );

  constructor(private service: MyService) { }
}

answered Jan 10, 2020 at 22:09

Adam Dunkerley

7028 silver badges15 bronze badges

Collectives™ on Stack Overflow

Angular @Input binding using function calling multiple times

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related