Fix "Expression has changed after it was checked"

Fixing "Expression has changed after it was checked. Previous value: 'ngIf: true'. Current value: 'ngIf: false'."#

Error Message#

Expression has changed after it was checked. Previous value: 'ngIf: true'. Current value: 'ngIf: false'.

Overview#

Although this error rarely affects normal usage, it is quite unpleasant to see an error in the Console (so we want to resolve this issue).

Starting to Resolve#

First, from this error, we can roughly understand that it is caused by Angular detecting a discrepancy between the original value and the new value during its value check.
Since Angular cannot update itself, we have to help it update. The code is as follows:

    import { AfterContentChecked } from '@angular/core';
    // ... other code
    @Component({
        selector: 'app-test',
        templateUrl: './test.component.html'
    })
    export class TestComponent implements AfterContentChecked {
        // ... other code
        public constructor(
                private titleService: Title,
                public layout: LayoutService,
                // Update checker
                private cdr: ChangeDetectorRef,
        ) {
            // ... other code
        }
        
        // After checking, we trigger an update check again
        ngAfterContentChecked(): void {
            this.cdr.detectChanges();
        }
}

In this way, we have resolved the issue.