ExpressionChangedAfterItHasBeenCheckedError

[bobbydowling]

Getting ExpressionChangedAfterItHasBeenCheckedError with:

Angular 4.3.1
Angular2-Busy 2.0.4

[janbro]

I'm also getting this error in the console

[bobbydowling]

Yeah, still seems to work, but the console error is a nag.

Maybe need to use the ChangeDetectorRef to check for changes?

[janbro]

Yeah, maybe try this.ref.markForCheck(); after you set the variable binded to ngBusy. What's weird is the error doesn't show up on my local project, just on my dev server.

[bobbydowling]

After variable binding?

I configure busy in the HTML and set the variable equal to the observable, say when I call an API data service.

[janbro]

My code is like this, I haven't had the chance to check if the error is still showing:

app.component.html

<home-navbar>
</home-navbar>
<simple-notifications></simple-notifications>
<div class="container" [ngBusy]="getBusy()">
  <router-outlet>
  </router-outlet>
</div>

app.component.ts

import { Component, NgModule, OnInit, ChangeDetectorRef } from '@angular/core';
import { LoadingService } from './services/loading.service';

@NgModule({
  declarations: [ AppComponent ],
  exports: [ AppComponent ]
})
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {

  busy: any = [];

  constructor(private ref: ChangeDetectorRef,
    private loadingHandler: LoadingService) { }

  ngOnInit() {
    this.loadingHandler.loadingAnnounced$.subscribe(busy => {
      this.busy.push(busy);
      this.ref.markForCheck(); // <-- Check changes. Use this.ref.detectChanges() if not fixed
    });
  }

  getBusy() {
    return [...this.busy];
  }

}

[bobbydowling]

What I thought you meant. I'll give it a try. Thanks.

[bobbydowling]

Neither seemed to work, unfortunately.

[bobbydowling]

But I'm not doing this is init.