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'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {  
  @ViewChild(CounterComponent)
  counterComponent: CounterComponent
  comments = [
    {</span&gt;
      author: 'Jay Kay',
      content: 'TypeScript makes Angular awesome'
    },
    // ...
  ]

  onShowComment(comment) {
    alert(comment.content);
  }
  
}

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.