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

Use OnPush strategy if your objects are immutable and you doesn't change the state of the objects in your component. It will perform better rather than default where each change of the object make run change detector to resolve changes. More or less similar is described in Change Detection Strategy: OnPush

To inform Angular that we are going to comply with the conditions mentioned before to improve performance, we will use the OnPush change detection strategy.

The Angular docs said

ChangeDetectionStrategy

enum ChangeDetectionStrategy {
  OnPush: 0
  Default: 1
}

Members

Member	Value	Description
OnPush	0	OnPush means that the change detector's mode will be initially set to CheckOnce.
Default	1	Default means that the change detector's mode will be initially set to CheckAlways.

I fixed this by adding ChangeDetectionStrategy from angular core.

import {  Component, ChangeDetectionStrategy } from '@angular/core';

@Component({
    changeDetection: ChangeDetectionStrategy.OnPush,
    selector: 'page1',
    templateUrl: 'page1.html',
})