Pass data from child component to template in angular2

Question

I've got two components - Home and Counter and I want to be able to increment template variable in Counter from Home. It doesn't work, except initialization - the variable is initialized to 17, but after that the increment doesn't work.

CounterComponent

import { Component, Input } from '@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 } from '@angular/core';
import { CounterComponent } from './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>

Thierry Templier · Accepted Answer · 2016-07-28 12:40:34Z

1

I would reference the counter component using the ViewChild decorator. With this instance, you can interact programmatically with it.

@Component({
  (...)
})
export class HomeComponent {
  @ViewChild(CounterComponent)
  counter:CounterComponent;

  doSomething() {
    this.counter.activate();
  }
}

answered Jul 28, 2016 at 12:40

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Pass data from child component to template in angular2

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related