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

Question

I have an AngularJS project, I want to prevent a FOUC during page load on a classname. I\'ve read about ng-template but that seems useful only for content within a tag.

Answer 1

One of the problems that you're facing is that the browser will display the element before AngularJS has loaded and started manipulating the DOM. What other people said about ng-class is correct, it will do the right class applying but you still need to not show anything before Angular is ready.

In previous versions of Angular you could do this:

In recent versions this doesn't work however because ng-show does its visibility by adding and removing the ng-hide class (which is less specific than an element attribute)

What I've been doing recently is this:

...
        

Doing it this way means that the will be immediately hidden by the style for the ng-cloak class. When Angular does start up it will process all of the directives include ng-class and ng-cloak, so your element will then have the right class and be visible.

Read more here ng-cloak directive