angular - Pass data from child component to template in angular2 -

i've got 2 components - home , counter , want able increment template variable in counter home. doesn't work, except initialization - variable initialized 17, after increment doesn't work.

countercomponent

import { component, input } '@angular/core';  @component({   selector: 'counter',   styleurls: ['app/counter.component/style.css'],   templateurl: 'app/counter.component/counter.component.html' }) export class countercomponent {    public counter: number = 17;      activate() {     this.counter++;   }    deactivate() {     this.counter--;   } } 

counter.component.html

the counter is: {{counter}} 

homecomponent

import { component } '@angular/core'; import { countercomponent } './counter.component/counter.component';  @component({   selector: 'home',   directives: [countercomponent],   providers: [countercomponent],   templateurl: 'app/home.component.html' }) export class homecomponent {    constructor(public counter: countercomponent) {}    dosomething() {     this.counter.activate();   }  } 

home.component.html

home component  <button (click)="dosomething()">activate</button>   <counter></counter> 

i reference counter component using viewchild decorator. instance, can interact programmatically it.

@component({   (...) }) export class homecomponent {   @viewchild(countercomponent)   counter:countercomponent;    dosomething() {     this.counter.activate();   } }