How to use Angular setter when Input changed?

Question

I have two components Parent Component and Child component, I have an API that takes place in the Parent component and the response value is passed to the child component. currently I am using ngOnChanges but I want to know how to use Setters instead.

assume In the ParentComponent I have the below code:

<ChildComponent [apiResponse]="res" />

and in the ChildComponent I have this:

@Input() apiResponse: any;

ngOnChanges(changes: SimpleChanges) {
    console.log(this.apiResponse)
}

Every time the apiResponse changed the ngOnChanges function will fire and prints the value in the console.

if I want to achieve the result but with the use if Setters. as in other scenario I might have multiple inputs and I don't want ngOnChanges to get fired every time an input's value changed.

It may help you angular.io/guide/…

Arunkumar Ramasamy
– Arunkumar Ramasamy

2020-10-31 01:30:54 +00:00
Commented Oct 31, 2020 at 1:30 — Arunkumar Ramasamy
– Arunkumar Ramasamy, Commented Oct 31, 2020 at 1:30

julianobrasil · Accepted Answer · 2022-01-28 19:10:57Z

10

Instead of:

@Input() apiResponse: any;

Use:

@Input() 
get apiResponse(): any {return this._apiResponse;}
set apiResponse(value: any) {
  this._apiResponse = value;
  console.log(value);
  // do whatever else you want to do here
}
private _apiResponse: any;

In the code above, the only really necessary part is the setter function. Without that, you cannot pass in the values from the parent components via @Input()'s. The rest is just a matter of what you want. For example, if you want to save the value to use it later, you need the private member (or a BehaviorSubject or anything you think it's good for storing a value):

@Input() 
set apiResponse(value: any) {
  this._apiResponse$.next(value);
  console.log(value);
  // do whatever else you want to do here
}
_apiResponse$: BehaviorSubject<any> = new BehaviorSubject<any>(null);

In the example above, notice that I haven't made the subject a private member. I suppose you want to use it in the template, so, even though it should be private (not part of the component API), I can't do that because the template needs to access it. The underscore is something to indicate that such a public member is not part of the API.

edited Jan 28, 2022 at 19:10

answered Oct 31, 2020 at 1:41

julianobrasil

9,4472 gold badges38 silver badges58 bronze badges

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

1 Comment

Ali Over a year ago

can you please use BehaviorSubject to save the data?

Collectives™ on Stack Overflow

How to use Angular setter when Input changed?

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