ExpressionChangedAfterItHasBeenCheckedError invoking toastr in ngInit in Angular 6

Question

After registering, user is redirected to login page, with a ?welcome=1 param in the URL so that it can display a welcoming toast.

in Login component, I have:

ngOnInit() {
    ... 
    if (this.route.snapshot.queryParams['welcome']) {
      this.toastr.success('Register Successful, please login');
    }
  }

and I get his message:

Toast_Host.ngfactory.js? [sm]:1 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'className: undefined'. Current value: 'className: toast-success toast'. It seems like the view has been created after its parent and its children have been dirty checked. Has it been created in a change detection hook ?
    at viewDebugError (core.js:8445)
    at expressionChangedAfterItHasBeenCheckedError (core.js:8433)
    at checkBindingNoChanges (core.js:8535)
    at checkNoChangesNodeInline (core.js:11401)
    at checkNoChangesNode (core.js:11390)
    at debugCheckNoChangesNode (core.js:11997)
    at debugCheckRenderNodeFn (core.js:11951)
    at Object.eval [as updateRenderer] (Toast_Host.ngfactory.js? [sm]:1)
    at Object.debugUpdateRenderer [as updateRenderer] (core.js:11940)
    at checkNoChangesView (core.js:11291)

I don't understand, I am not doing anything wrong nor changing any values, so why am I getting an error ?

Possible duplicate of [ExpressionChangedAfterItHasBeenCheckedError Explained](https://stackoverflow.com/questions/43375532/expressionchangedafterithasbeencheckederror-explained) — Amit Chigadani, Jun 21 '18 at 07:50

score 4 · Accepted Answer · answered Jun 21 '18 at 07:43

4

Put your toaster call inside setTimeout() in ngAfterViewInit():

ngAfterViewInit() {
  if (this.route.snapshot.queryParams['welcome']) {
    setTimeout(() => {
      this.toastr.success('Register Successful, please login');
    }, 0);
  }
}

answered Jun 21 '18 at 07:43

FAISAL

33,618
10
97
105

score 3 · Answer 2 · answered Jun 21 '18 at 07:41

3

try add timeout:

if (this.route.snapshot.queryParams['welcome']) {
  setTimeout(() => {
    this.toastr.success('Register Successful, please login');
  });
}

answered Jun 21 '18 at 07:41

porgo

1,729
2
17
26

I don't understand setTimeout without params. How long will it pause ? – Juliatzin Jun 21 '18 at 07:46
2

@JuliatzindelToro default value is 0, even then this code in setTimeout() function is executed as last – porgo Jun 21 '18 at 07:49
@Juliatzin read about event loop and find out how JS works – Nickon Jul 09 '20 at 14:44

ExpressionChangedAfterItHasBeenCheckedError invoking toastr in ngInit in Angular 6

2 Answers2