Communicating with Child component

• Using @Input():

  /**
   * child.component.ts
   */
  import { Input } from '@angular/core';
  ...
  export class ChildComponent {
      @Input() inputParam;
  }
  ...

  <!--
      parent.component.html
    -->
  ...
  <child-component [inputParam]="passParam">...</child-component>
  ...

• Using Template variable:

  <!--
      parent.component.html
    -->
  ...
  <child-component #templateRef>...</child-component>
  ...
  <span>{ { templateRef.publicObj }}</span>
  ...
  <button (click)="templateRef.publicFunc()"></button>
  ...

Communicating with Parent component

• Using @Output():

  /**
   * child.component.ts
   */
  import { Output, EventEmitter } from '@angular/core';
  ...
  export class ChildComponent {
      @Output() outputEvent = new EventEmitter();
      ...
      func() {
          ...
          this.outputEvent.emit(optionalParam);
          ...
      }
      ...
  }
  ...

  <!--
      parent.component.html
    -->
  ...
  <child-component (outputEvent)="parentFunc($event)">...</child-component>
  ...