ng4: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked

Question

i am using angular material stepper and the functionality is working as expected and getting below error:

Live Demo:

Answer 1

when you change the value at the beginning on the ngAfterInit method some times need a delay.

    setTimeout(() => {
          //Code Here
      x=Object //new value
        }, 0);
    setTimeout(() => {
          //Code Here
        });

this work for me

Answer 2

A different approach to avoid the ExpressionChangedAfterItHasBeenCheckedError in general is to use the ChangeDetectionStrategy.OnPush in your components:

@Component({
    selector: 'my-component',
    templateUrl: '/path/to/my-component.html',
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MyComponent {}

Components using the Push ChangeDetectionStrategy only rerender the DOM if the data displayed has changed instead of rerendering on every Angular change detection cycle. Therefore, this spares a lot of ressources on the client side.

You might want to consider the "downside" that object references passed via @Input() would not trigger this component's change detection and thus the need to eventually trigger it manually with a ChangeDetectorRef, but at the end this approach will lead to cleaner component property/data stream management.