title: Angular2 subscribing to changes to @Input in Child Component
body: <p>I have a parent and child component. Parent component has <code>index</code> and passes this through to the child component as an <code>@Input</code>. This <code>index</code> value constantly changes in the parent component, and inside my child component, I want to run a function everytime the Parent component changes <code>index</code>. This has a slide component that constantly changes it. How can I achieve this? I've tried with the below code (<code>this.index.subscribe(() =&gt;</code>), but I'm getting that it's not a function everytime I try and initialise the subscription.</p>
  
  <p>EDIT: There is no related code in the <code>Child</code> template that could impact this, so it's not provided. <code>ngOnChange</code> doesn't seem to work as the change is happening in the directive as opposed to the <code>parent</code>'s template.</p>
  
  <p>Child:</p>
  
  <pre><code>import {Component, OnInit, ViewChild, Input} from '@angular/core';
  import {Observable} from 'rxjs/Observable';
  
  @Component({
      selector: "child",
      templateUrl: "components/child/child.html",
  })
  
  export class ChildComponent implements OnInit {
      @Input() index: string;
      currentIndex: any;
  
      constructor() {}
  
      ngOnInit() {}
  
      ngOnChanges(){}
  
      ngAfterViewInit() {
          console.log("index " + this.index);
          this.currentIndex = this.index.subscribe(() =&gt; {
               console.log("index " + this.index);
          })
      }
  
      ngOnDestroy() {
          this.currentIndex.unsubscribe();
      }
  
  }
  </code></pre>
  
  <p>Parent:</p>
  
  <pre><code>import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
  import {Page} from "ui/page";
  import {ChildComponent} from '/components/child/child.component'
  
  @Component({
      selector: "parent",
      template: "&lt;child [index]="index"&gt;&lt;/child&gt;",
      directives: [ChildComponent]
  })
  
  export class ParentComponent implements OnInit {
  
      index: string = "0,1";
  
      constructor(private page: Page) {
      }
  
  
  
  }
  </code></pre>