update variable on @Input() change

Question

I have an Input variable whose value is changed in parentComponent. On every change, I need to update a variable called currentNumber local to child component. At the moment I only initialise it in onInit method, but input changes over the life time of childComponent.ts

ChildComponent.ts

@Input() input;
...
...
ngOnInit(){
    this.currentNumber = this.data.someOtherNumber+this.input.numberIneed;;
}

I am aware of observers, but I feel like that declaring another service just for this is an overkill.

Pac0 · Accepted Answer · 2017-11-28 14:06:47Z

15

You can use a setter :

private _input: number;
@Input() set input(value: number) {
     this._input = value;
     this.currentNumber = this.data.someOtherNumber + this.input.numberIneed; 
}; 
get input() { return this._input; }

or ngOnChanges :

export class ChildComponent implements OnChanges {
    // ...
    ngOnChanges(changes: { [propName: string]: SimpleChange }) {
         if (changes['input'] && changes['input'].currentValue !== changes['input'].previousValue) {
             this.currentNumber = this.data.someOtherNumber+this.input.numberIneed;
         }
    }
}

edited Nov 28, 2017 at 14:06

answered Nov 28, 2017 at 14:01

Pac0

23.3k9 gold badges76 silver badges85 bronze badges

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

Comments

Mateusz Witkowski · Accepted Answer · 2017-11-28 14:00:27Z

3

You can use a setter.

@Input('input')
set input(value: numer) {
    this.currentNumber = this.data.someOtherNumber+this.input.numberIneed;
}

answered Nov 28, 2017 at 14:00

Mateusz Witkowski

1,74611 silver badges24 bronze badges

Comments

Carsten Ennulat · Accepted Answer · 2017-11-28 14:02:58Z

2

You can use ngOnChanges. If input changes this function is called:

ngOnChanges(){
  this.currentNumber = this.data.someOtherNumber + this.input.numberIneed;
}

answered Nov 28, 2017 at 14:02

Carsten Ennulat

1551 silver badge10 bronze badges

Collectives™ on Stack Overflow

update variable on @Input() change

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related