Read more

AngularJS 1: How to keep "ng-hidden" elements from flickering on page load

Dominik Schöler
May 04, 2015Software engineer at makandra GmbH

When you have an element you want to hide, you can add a ng-show='isOpen' attribute to that element. When you set isOpen to false on the scope, the element will be hidden.

Illustration money motivation

Opscomplete powered by makandra brand

Save money by migrating from AWS to our fully managed hosting in Germany.

  • Trusted by over 100 customers
  • Ready to use with Ruby, Node.js, PHP
  • Proactive management by operations experts
Read more Show archive.org snapshot

However, when you load the page, the element is usually rendered by the browser before Angular has loaded and had a chance to hide it.

Generic fix (prefer)

The ng-cloak directive Show archive.org snapshot was designed for exactly this purpose. Add a ng-cloak attribute or class (and more, see the link) to any element you want to have hidden until Angular wakes up.

Specific fix

ngHide/ngShow internally toggle the ng-hide class on the element. Just add it to your element to have it already hidden on page load:

<some-element ng-show="isOpen" class="ng-hide"> ... </some-element>

Since this requires knowledge of the inner workings of ng-hide, you should avoid it and prefer the ng-cloak approach.

Posted by Dominik Schöler to makandra dev (2015-05-04 18:15)