AngularJs ng-hide while loading

Question

I have 4 forms of which using angular ng-hide and ng-show to display each when needed. But when the page loads initially it displays all forms while loading and only hide them when loading completes. It really looks crappy while loading. Is there a way i can prevent this from happen?

Usually, you want to apply it to whole app, just for a time, while angular is not here. But you can apply it to what you want - just add class or attribute... See docs/@asdf_enel_hak's answer below for css rule Angular remove this stuff when it's loaded and will be applied standard ngShow/ngHide features. — vp_arth
– vp_arth, Commented May 23, 2016 at 15:14

asdf_enel_hak · Accepted Answer · 2016-05-23 14:46:53Z

1

ng-cloak will work for you

example:

in your css:

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

and in your code:

<div id="template1" ng-cloak>{{ 'hello' }}</div>

answered May 23, 2016 at 14:46

asdf_enel_hak

7,6585 gold badges47 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Łukasz · Accepted Answer · 2016-05-23 16:19:29Z

1

CSS:

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

HTML:

<body ng-cloak> ... </body>

will work, but it will hide whole body. https://docs.angularjs.org/api/ng/directive/ngCloak:

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.

so it's better to apply ng-cloak to particular elements:

<div ng-cloak> ... </div>
<div ng-cloak> ... </div>

edited May 23, 2016 at 16:19

answered May 23, 2016 at 16:00

Łukasz

2,1711 gold badge15 silver badges29 bronze badges

Collectives™ on Stack Overflow

AngularJs ng-hide while loading

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related