Accessing properties and methods of a child via a parent component

Other than data flowing in and the event pushed up, there are other strategies for communication. We can access child members from the parent component using template variables. Let's create a counter component to serve as our example:

ng g component counter

Now add a counter variable and initialize it to zero:

//counter.component.html<h5>
  {{counter}}
</h5> //counter.component.ts import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-counter',
  templateUrl: './counter.component.html',
  styleUrls: ['./counter.component.css']
})
export class CounterComponent implements OnInit {
  
  counter: number = 0;

  increment() {
    this.counter++
  }

 decrement() ...

Get TypeScript 2.x for Angular Developers now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.