I am trying to use NG2 binding but for some reason it doesnt work when i have multiple nested @Input data I have read and tried solutions from: Angular 2 - View not updating after model changes
but without luck. What I basically have is 3 components (parent -> child -> grandson) the parent has a data field, the child and the grandson take it as input. the original value passes without a problem but when i try to update this value in the parent component, the child and grandson arent updated.
it is in the spirit of the following simple components:
@Component({
selector: 'parent',
template: '<button (click)="updateData()">
<child [data]="data"></child>'
})
export class ChildComponent { var data = { a : 0};
click() { this.data.a+=1; }
}
@Component({
selector: 'child',
template: '<grand [data]="data"></grand>' })
export class GrandComponent {
@Input data:any;
}
@Component({
selector: 'grand',
template: '<div>{{data.a}}</div>' })
export class ParentComponent {
@Input data:any;
}