Angular 8: Getting error on console ExpressionChangedAfterItHasBeenCheckedError when *ngIf is used

Question

I have 2 components inside a wrapper, and wrapper has fixed height. ToggleComponent has height css property bound to height field and a button which changes height field. TestComponent takes rest of the height. It has test attribute bound to its clientHeight. Focus is on the DOM binding to something that would change from other component by its binding, that is why i use clientHeight. If there is *ngIf directive on TestComponent, when ToggleComponent.height is changed, ExpressionChangedAfterItHasBeenCheckedError occurs.

Error:

Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'test: 200'. Current value: 'test: 100'.
    at viewDebugError (core.js:20440)
    at expressionChangedAfterItHasBeenCheckedError (core.js:20428)
    at checkBindingNoChanges (core.js:20530)
    at checkNoChangesNodeInline (core.js:23403)
    at checkNoChangesNode (core.js:23390)
    at debugCheckNoChangesNode (core.js:23994)
    at debugCheckDirectivesFn (core.js:23922)
    at Object.eval [as updateDirectives] (testChild.html:2)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:23911)
    at checkNoChangesView (core.js:23289)

Answer 1

Try to add such code:

import { ChangeDetectorRef } from '@angular/core';

Your class must implement OnAfterViewChecked

constructor(private cdRef:ChangeDetectorRef) {}

ngAfterViewChecked()
{
    this.cdRef.detectChanges();
}

But for the best answer, show your code.