angular2 ngOnChanges not working for multiple inputs

Question

I am working on this angular2 app in which I am accepting two inputs in one component.

I have used ngOnChanges to detect changes on these input values.

@Input() games: any;
@Input() selectedGame:any;

ngOnChanges(changes: {[propName: string]: SimpleChange}) {    
    this.selectedGame=changes['selectedGame'].currentValue;  //this works
    this.games=changes['games'].currentValue;    //this doesn't work
}

However, I can only detect change in first variable. the second variable is not getting updated when its value changes in parent.

any inputs?

Can you reproduce this issue in Plunker?

Yaron Schwimmer
– Yaron Schwimmer

2016-08-23 10:52:05 +00:00
Commented Aug 23, 2016 at 10:52 — Yaron Schwimmer
– Yaron Schwimmer, Commented Aug 23, 2016 at 10:52

Lauwrentius · Accepted Answer · 2016-12-15 20:25:05Z

6

Depending on the change from the parent component, ngOnChanges might be triggered separately for each Input changed. You need to check which Input has changed first.

ngOnChanges(changes: SimpleChange}) {   
    if(changes['selectedGame'] !== undefined)
        this.selectedGame=changes['selectedGame'].currentValue;

    if(changes['games'] !== undefined)
        this.games=changes['games'].currentValue;
}

Here's the working plunk https://plnkr.co/edit/n6X21VHXw1xlA8XCPoQu

answered Dec 15, 2016 at 20:25

Lauwrentius

5035 silver badges12 bronze badges

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

Comments

Abhijit Muke · Accepted Answer · 2018-12-31 06:47:17Z

2

You supposed to use SimpleChanges instaed of SimpleChange, it will give you all list of input parameters.

ngOnChanges(changes: SimpleChanges) {
 for (let propName in changes) {  
   let change = changes[propName];
   let curVal  = JSON.stringify(change.currentValue);
   let prevVal = JSON.stringify(change.previousValue);

    console.log(curVal);
    console.log(prevVal);
 }
}

answered Dec 31, 2018 at 6:47

Abhijit Muke

1,2243 gold badges17 silver badges41 bronze badges

Collectives™ on Stack Overflow

angular2 ngOnChanges not working for multiple inputs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related