Detect change in child component's variable triggered by parent angular 2

Question

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
}

Plunker Link

score 16 · Accepted Answer · edited Jan 19 '17 at 17:32

16

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

edited Jan 19 '17 at 17:32

Siddharth Sharma

1,653
2
19
35

answered Jan 19 '17 at 16:20

Günter Zöchbauer

623,577
216
2,003
1,567

1

Thank you so much for the help. ngOnChanges worked for me. and thanks for the hint. – amansoni211 Jan 19 '17 at 17:27
1

You might add the `get` to your first example: `get newData() { return this._newData; }` – inorganik Apr 03 '18 at 22:09

score 1 · Answer 2 · answered Jan 19 '17 at 16:41

1

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

answered Jan 19 '17 at 16:41

Siddharth Sharma

1,653
2
19
35

1

Your Plunker helped alot. Thanks! – amansoni211 Jan 19 '17 at 17:28

score -2 · Answer 3 · answered Jan 19 '17 at 16:18

You have to do the binding like this:

<child-com [newdata]="data"></child-com>

This is a really good resources for different methods on communicating between components:

https://angular.io/docs/ts/latest/cookbook/component-communication.html

What you are looking for is: Pass data from parent to child with input binding

Detect change in child component's variable triggered by parent angular 2

3 Answers3