Передача данных из ng-содержимого в родительский компонент при изменении дочернего компонента

Question

Необходимо передать данные в родительский компонент при изменении дочернего компонента.

У меня есть 2 компонента, и когда я выбираю что-то из списка, я хочу передать данные в родительский компонент.

Компонент 1 - app-rx-search-field

<div>
  <form class="search_field_form_container">
    <input id="rx-search-field" type="search" class="form-control" name="search" placeholder="Search" [autocomplete]="false" [(ngModel)]="searchModel" [formControl]="searchFieldControl" />
    <ng-content></ng-content>
  </form>
</div>

import {Component, EventEmitter, OnInit, Output} from '@angular/core';
import {debounceTime, distinctUntilChanged} from 'rxjs/operators';
import {FormControl} from '@angular/forms';

@Component({
  selector: 'app-rx-search-field',
  templateUrl: './search-field.component.html',
  styleUrls: ['./search-field.component.styl']
})
export class SearchFieldComponent implements OnInit {

  @Output() searchTermEvent: EventEmitter<string> = new EventEmitter<string>();

  public searchModel: any;
  public searchFieldControl = new FormControl();

  constructor() { }

  ngOnInit() {
    this.searchFieldControl.valueChanges
      .pipe(
        debounceTime(500),
        distinctUntilChanged()
      )
      .subscribe({
        next: value => {
          this.searchTermEvent.emit(value);
        }
      });
  }

}

Компонент 2 - app-rx-options

<div *ngFor="let option of optionsList">
  <p (click)="onClickOption($event, option)">{{option[key]}}</p>
</div>

import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';

@Component({
  selector: 'app-rx-options',
  templateUrl: './options.component.html',
  styleUrls: ['./options.component.styl']
})
export class OptionsComponent implements OnInit {

  @Input() optionsList: Array<any> = [];
  @Input() key?: string = '';
  @Output() optionSelected: EventEmitter<any> = new EventEmitter<any>();

  constructor() { }

  ngOnInit() {
  }

  public onClickOption = (event: MouseEvent, option: any) => {
    this.optionSelected.emit({event, option});
  }

}

И вот как реализованы эти 2 компонента:

<div>
  <app-rx-search-field (searchTermEvent)="onSearch($event)">
    <app-rx-options [optionsList]="suggestedSpecialtiesList$ | async" [key]="'specialty_name'" (optionSelected)="onOptionSelected($event)"></app-rx-options>
  </app-rx-search-field>
</div>

Теперь, когда генерируется событие optionSelected , тогда текстовое поле внутри rx-app-search-поле должно показывать это значение.