Toggling the child component using @ViewChild. For more, visit https://angularman.wordpress.com

app.component.ts

import {Component, ViewChild} from '@angular/core'
import {ToggleComponent} from './child.component.ts'

@Component({
  selector: 'my-app',
  template: `
  
    <div style="color: red;">
      <h2>Parent Component</h2>
    </div>
    <div>
    Toggle child component: 
    <input type="button" value="Toggle" (click)="toggleChild()"/>
    </div>
    <toggle></toggle>
  `,
})
export class App {
  @ViewChild(ToggleComponent) child: ToggleComponent;
  
  name:string;
  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }
  toggleChild() {
    this.child.toggle();
  }
}