Angular2 subscribing to changes to @Input in Child Component

Question

I have a parent and child component. Parent component has index and passes this through to the child component as an @Input. This index value constantly changes in the parent component, and inside my child component, I want to run a function everytime the Parent component changes index. This has a slide component that constantly changes it. How can I achieve this? I've tried with the below code (this.index.subscribe(() =>), but I'm getting that it's not a function everytime I try and initialise the subscription.

EDIT: There is no related code in the Child template that could impact this, so it's not provided. ngOnChange doesn't seem to work as the change is happening in the directive as opposed to the parent's template.

Child:

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(() => {              console.log("index " + this.index);         })     }      ngOnDestroy() {         this.currentIndex.unsubscribe();     }  } 

Parent:

import {Component, ElementRef, OnInit, ViewChild} from '@angular/core'; import {Page} from "ui/page"; import {ChildComponent} from '/components/child/child.component'  @Component({     selector: "parent",     template: "<child [index]="index"></child>",     directives: [ChildComponent] })  export class ParentComponent implements OnInit {      index: string = "0,1";      constructor(private page: Page) {     }    } 

Answer 1

https://angular.io/docs/ts/latest/api/core/index/Input-var.html

To quote:

Angular automatically updates data-bound properties during change detection.

If you need to do some processing on the input, look at the get and set. https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-child-setter

From the documentation, here is an example.

import { Component, Input } from '@angular/core'; @Component({   selector: 'name-child',   template: `     <h3>"{{name}}"</h3>   ` }) export class NameChildComponent {   _name: string = '<no name set>';   @Input()   set name(name: string) {     this._name = (name && name.trim()) || '<no name set>';   }   get name() { return this._name; } } 

You don't need to use an observable.