ExpressionChangedAfterItHasBeenCheckedError: Expr изменился после его проверки. Предыдущее значение: 'ngIf: false'. Текущее значение: 'ngIf: true'

Question

Я использую Angular 7 и использую «ng serve» для запуска приложения. У меня есть родительско-дочерние компоненты, а у родительского компонента при нажатии кнопки переворачивается значение логического свойства. если это логическое свойство имеет значение true, отображается дочерний компонент (* ngIf). Из дочернего компонента я генерирую событие, вызывающее функцию в родительском компоненте, которая переворачивает значение логического свойства в Parent, вызывая удаление дочернего компонента (* ngIf)

Родительский компонент:

Parent.component.ts

 capture: boolean = false;
  onCapture () {
    console.log("onCapture called")
    this.capture =  !this.capture;
  }

Parent.component. html

<app-capture *ngIf="capture ==true" (closeCapturePage)="onCapture()"></app-capture>
 <label>
    <img src="/assets/img/camera.svg" alt="" width="32" height="32" title="Open window">
    <input type="button" (click)="onCapture()" id="capture" style="display: none">
  </label>

Child-component.ts

@Output() closeCapturePage = new EventEmitter<void>();

closePage() {
      this.closeCapturePage.emit();
}

Я вижу дочерний компонент Событие отправляется успешно, однако обнаруживается ошибка ExpressionChangedAfterItHasBeenCheckedError: Выражение изменилось после его проверки. Предыдущее значение: 'ngIf: false'. Текущее значение: 'ngIf: true'

Я попробовал решения, предложенные в аналогичных потоках, такие как реализация ngAfterViewChecked в родительском компоненте, но не повезло.

  show = false;

  ngAfterViewChecked(): void {
  let show = this.capture;
  if (show != this.show) {
    this.show = show;
    this.cdRef.detectChanges();
  }
  }

Stackblitz Пример: https://stackblitz.com/edit/angular-8efhdm (ПРИМЕЧАНИЕ: простой пример не воспроизводил, поэтому я добавил реальный код, который запускает камеру, но ничего не записывает, никаких проблем с конфиденциальностью!)