AngularJS strategy to prevent flash-of-unstyled-content for a class

What you are looking for is ng-cloak.
You have to add it like this:

<body class="{{ bodyClass }}" ng-cloak>

and this will prevent unwanted flashing.
Link to docs about this.

Edit:
It is also advisable to put the snippet below into your CSS file, according to docs.

“For the best result, the angular.js script must be loaded in the head
section of the html document; alternatively, the css rule above must
be included in the external stylesheet of the application.”

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
}

Leave a Comment