Detect change in child component's variable triggered by parent angular 2
Solution 1
Either you make newData
a setter or you implement OnChanges
export class ChildCom {
private _newdata: any = [];
@Input()
set newdata(value) {
// code here
}
}
export class ChildCom implements OnChanges {
@Input() set newdata(: any = [];
ngOnChanges(changes) {
// code here
}
}
https://angular.io/docs/ts/latest/api/core/index/OnChanges-class.html
hint
newdata={{data}}
is fine, but only supports string values
[newdata]=data
supports all types of values.
Here is a link to updated plnkr to explain the same, https://plnkr.co/edit/5ahxWJ?p=preview
Solution 2
Some code changes can make the same work.
1) provide newData as input and don't use interpolation to pass data to the child component.
<child-com [newdata]="data"></child-com>
2) Two easy ways to detect change are ngOnChanges as suggested by @Gunter or use rxjs Observable subscriber model, easy one being ngOnChanges. Here is your modified plunkr using the same. https://plnkr.co/edit/5ahxWJ?p=preview
![amansoni211](https://i.stack.imgur.com/uObVL.jpg?s=256&g=1)
Comments
-
amansoni211 almost 2 years
I have 2 files. app.ts and Child.ts
I am sending a variable from app to child and I want to detect any change in the variable and show data accordingly. I am not able to detect changes in a variable.
Any Help? I have attached Plunker Link and I have also explained what I want to do in Child.ts file in comments
App.ts File
//our root app component import {Component, NgModule} from '@angular/core' import {BrowserModule} from '@angular/platform-browser' import {ChildCom} from './child.ts' @Component({ selector: 'my-app', template: ` <div> <h2>Hello</h2> <child-com newdata={{data}}></child-com> </div> `, }) export class App { data: any = []; constructor(){ this.data = [{"name":"control","status":"false"}]; } } @NgModule({ imports: [ BrowserModule ], declarations: [ App, ChildCom ], bootstrap: [ App ] }) export class AppModule {}
Child.ts File
import {Component, Input} from '@angular/core'; @Component({ selector: 'child-com', template: ` <div> <p>Controls: {{newdata}}</p> </div> `, }) export class ChildCom { @Input() newdata: any = []; constructor(){ } // here I want to check if the value of control in newdata variable is false // then display a message on the front end "your controls are not working" // if the value of control in newdata variable is true // then display a message on front end "your controls are working fine." // this should automatically happen whenever I change the value of newdata variable }
-
amansoni211 over 7 yearsThank you so much for the help. ngOnChanges worked for me. and thanks for the hint.
-
amansoni211 over 7 yearsYour Plunker helped alot. Thanks!
-
inorganik about 6 yearsYou might add the
get
to your first example:get newData() { return this._newData; }