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 UI/UX Design

UI/UX Design by makandra brand

We make sure that your target audience has the best possible experience with your digital product. You get:

  • Design tailored to your audience
  • Proven processes customized to your needs
  • An expert team of experienced designers
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)