How to update the input decorator value in angular 14

Question

Trying to change the input array value. But not working in angular 14.I do not know why it is not working. If anyone knows please help to find the solutions.

app.component.ts:

changeVal() {
      this.httpClient.get<string[]>('assets/role.json').subscribe((data) => {
      this.allData = data;
      console.log(data);
      });
   }

Demo: https://stackblitz.com/edit/angular-ivy-3p6bxk?file=src%2Fapp%2Fauto%2Fauto.component.ts

Does this answer your question? [How to pass data from parent component to child component angular 14](https://stackoverflow.com/questions/72983544/how-to-pass-data-from-parent-component-to-child-component-angular-14) — FedG, Jul 15 '22 at 06:50
Why can't you use directly the `data` property instead of assigning to another variable? Anyway, if you want to know when an input property changes, look into [ngOnChanges lifecycle hook](https://angular.io/api/core/OnChanges). — Octavian Mărculescu, Jul 15 '22 at 07:01

WSD · Answer 1 · 2022-07-15T07:59:57.673

Actually, your code is doing what it supposed to do :)
In your auto.component.ts your are reading and assigning to the rateData only during the component initialization. This mean that the next changes to your @Input() data will just stay there and will not be assigned to your rateData property.

The simplest solution would be to use a setter.
Something like this

  @Input() set data (data: Array<string>) {
    this.rateData = data;
  }

score 0 · Answer 2 · answered Jul 15 '22 at 07:23

This why there's an ngOnChanges() life cycle hook!

When the value from parent changes, the child would have no idea about it, therefor, we use OnChanges interface, and implement the ngOnChanges() method that accepts a SimpleChanges param, in which it get called whenever the value is changed at parent side.

Here's and edited stackblitz that is working.

Happy coding.

How to update the input decorator value in angular 14

2 Answers2