0

I'm using a css loader on my root app.component.html with a ngIf :

<div *ngIf="displayPageLoader" class="page-loader-background">
    <div class="page-loader">
        <div class="loader2" style="font-size: 7px; top: -50px;">Loading...</div>
    </div>
</div>

When i need to display the loader, i'm calling the ToggleLoadersService service which tells the root component to change the variable displayPageLoader.

It works well but i keep getting this error on pretty much every page :

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'. 
    at viewDebugError (vendor.bundle.js:8687)
    at expressionChangedAfterItHasBeenCheckedError (vendor.bundle.js:8665)
    at checkBindingNoChanges (vendor.bundle.js:8829)
    at checkNoChangesNodeInline (vendor.bundle.js:12682)
    at checkNoChangesNode (vendor.bundle.js:12656)
    at debugCheckNoChangesNode (vendor.bundle.js:13431)
    at debugCheckDirectivesFn (vendor.bundle.js:13333)
    at Object.eval [as updateDirectives] (ng:///AppModule/AppComponent.ngfactory.js:50)
    at Object.debugUpdateDirectives [as updateDirectives] (vendor.bundle.js:13315)
    at checkNoChangesView (vendor.bundle.js:12476)
    at callViewAction (vendor.bundle.js:12840)

Here's a scenario that toggles this error :

  • User is on page 1.
  • User clicks page 2 button : The page 1 component calls the ToggleLoadersService service to toggle on the loader and then redirects the user to page 2.
  • User arrives on page 2.
  • the page 2 calls the ToggleLoadersService service to toggle off the loader.

The error appears when the page 2 try to call the ToggleLoadersService service to toggle off the loader.

I am aware that there are other related subjects but they are not really helping me.

Any help would be appreciated. Thanks.

Benekiki
  • 101
  • 1
  • 7
  • Without seeing your Service is hard, but have a look at this and read it, I've answered it already https://stackoverflow.com/questions/41364386/whats-the-difference-between-markforcheck-and-detectchanges/41364469#41364469 – Milad Jun 22 '17 at 12:13
  • read through the end – Milad Jun 22 '17 at 12:14
  • maybe duplication with https://stackoverflow.com/questions/43375532/expressionchangedafterithasbeencheckederror-explained – Yordan Nikolov Jun 22 '17 at 12:20
  • This is definitely related to my problem. I read through the end i will try to use detectChanges(). You can see my service code here : https://pastebin.com/9AWeaDww – Benekiki Jun 22 '17 at 12:24
  • The article [Everything you need to know about the `ExpressionChangedAfterItHasBeenCheckedError` error](https://medium.com/@maximus.koretskyi/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4) explains this behavior in great details – Max Koretskyi Jul 02 '17 at 05:30

1 Answers1

-1

Try [hidden] as it only hide the element not remove it. it will not create an event but will be only available to UI

Aniruddha Das
  • 20,520
  • 23
  • 96
  • 132