Is there a way to avoid AngularJS show all hidden elements until the page loads?

Question

All elements with the ng-hide attribute are visible until the page loads (and angular hide them) – it makes a strange web page appearance until that. With jquery, I was used to set style="display:none" and show them when the js is done.

Am I doing something wrong in AngularJS? Or is there a better way to solve this?

Thanks a lot!

Example of the page showing all hidden elements while loading:

Answer 1

Just Try

<div ng-app ng-cloak>
//Code 
</div>

Docs https://docs.angularjs.org/api/ng/directive/ngCloak

Answer 2

Take a look at ng-cloak

https://docs.angularjs.org/api/ng/directive/ngCloak

It will prevent this flicker.

Answer 3

check this official doc https://docs.angularjs.org/api/ng/directive/ngCloak add this directive to your body tag with custom css included at beginning or in html directly

Answer 4

Thanks for all perfect answers.

The ng-cloak does the trick:

• Documentation: link
• Step-by-step how to set it up: link

Remembering that recomendation:

The directive can be applied to the element, but the preferred usage is to apply multiple ngCloak directives to small portions of the page to permit progressive rendering of the browser view.