CODEWITHSUNDEEP
angularjs
Chidi Nkwocha
Chidi Nkwocha

Reputation: 85

AngularJs ng-hide while loading

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?

Upvotes: 4

Views: 1711

Answers (2)

Łukasz
Łukasz

Reputation: 2171

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>

Upvotes: 1

asdf_enel_hak
asdf_enel_hak

Reputation: 7640

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>

Upvotes: 1

Related Questions