Accessing child members with ViewChild

If the template variables don't feel natural, you can achieve the same behavior using ViewChild. This allows you to access the child as a variable on the class and not on the template:

//app.component.tsimport { Component, ViewChild } from '@angular/core';
import { CounterComponent } from './counter/counter.component'

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {  
  counterComponent: CounterComponent
  comments = [
      author: 'Jay Kay',
      content: 'TypeScript makes Angular awesome'
    // ...

  onShowComment(comment) {

We import the ...

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.