コンポジション関係にあるコンポーネント間の操作

<app-owner>
  <!-- 部品側のプロパティと所有者側のプロパティを関連づける -->
  <!-- リアルタイムに値が同期する -->
  <app-part [partProperty]="ownerProperty"></app-part>
</app-ower>

export class OwnerComponent {
  ownerProperty: string;
}

export class PartComponent {
  <!-- @Input()が必要 -->
  @Input() partProperty: string;
}

<app-owner>
  <!-- #で任意の名前を付ける -->
  <app-part #part></app-part>
</app-owner>

export class OwnerComponent {
  // #で付けた名前をプロパティに関連づける
  @ViewChild('part') private partComponent: PartComponent;

  exampleFunction() {
    // 部品側への呼び出し
    this.partComponent.onReceiveEvent('foo');
  }
}

export class PartComponent {
  onReceiveEvent(variable: string) {
    // ...
  }
}

<app-owner>
  <app-part (voted)="onVoted($event)"></app-part>
</app-owner>

export class OwnerComponent {
  onVoted(variable: string) {
  }
}

export class PartComponent {
  @Output() voted = new EventEmitter<string>();

  vote() {
    const variable: string = '渡す値';
    this.voted.emit(variable);
  }
}