2

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

enter image description here

Live Demo:

Mohamed Sahir
  • 2,482
  • 8
  • 40
  • 71
  • 4
    Move initializing FormGroups from ngOnInit to constructor and the error should go away https://stackblitz.com/edit/angular-pqfnya?file=app/step-one.component.ts – yurzui May 14 '18 at 09:37
  • you can get explanation of @yurzui's comment here https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4 – Pardeep Jain May 14 '18 at 09:44

2 Answers2

0

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

Riven
  • 1
  • 3
0

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.

pschulzk
  • 11
  • 3