ExpressionChangedAfterItHasBeenCheckedError。 角2（5）* ngIf

Question

I'm using a service to pass data between child and parent with the purpose being to update the parent ui with child specific info depending on what child is loaded.

Service:

import { Subject } from "rxjs/Subject";

export class ChildDataService {
  private childDetails = new Subject<{}>();

  childLoaded$ = this.childDetails.asObservable();
  changedComponentName(option: {}){
    this.childDetails.next(option);
  }
}

Parent Component:

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { ChildDataService } from "../core/helpers/child-data.service";
import { Subscription } from "rxjs/Subscription";

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class ParentComponent implements OnInit {
  childDetails: {title?: string};

  private subscription:Subscription;

  constructor( private childDataService: ChildDataService) {
    this.childDataService.childLoaded$.subscribe(
      newChildDetails => {
        console.log(newChildDetails);
        this.childDetails = newChildDetails
      });
  }
}

Example Child Component:

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { ChildDataService } from "../../core/helpers/child-data.service";

@Component({
  selector: 'app-child-dashboard',
  templateUrl: './child-dashboard.component.html',
  styleUrls: ['./child-dashboard.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class ChildDashboardComponent implements OnInit {

  constructor(private childDataService: ChildDataService) { }

  public ngOnInit() {
    this.childDataService.changedComponentName({
      title: 'Dashboard'
    });
  }
}

Parent HTML:

<div class="subheader">
  <h1>{{ childDetails?.title }}</h1>
  <button *ngIf="childDetails?.title == 'Dashboard'">dashboard</button>
  <button *ngIf="childDetails?.title == 'SecondChild'">Second Child</button>
</div>

With this setup I am getting the error "ExpressionChangedAfterItHasBeenCheckedError" when i click on a routerLink, now if i click on the same link a second time, the error persists but the correct button becomes visible. Spent all weekend getting nowhere with this, so any help would be greatly appreciated.

Answer 1

public ngOnInit() {
    setTimeout(() => {
        this.childDataService.changedComponentName({
          title: 'Dashboard'
        }), {});
}

it should work.

async ngOnInit() {
   await this.childDataService.changedComponentName({
            title: 'Dashboard'
         });
}