CODEWITHSUNDEEP
javascriptangularjs
Erdi
Erdi

Reputation: 1884

Angular ng-switch method hiding html elements after page rendered

Angular ng-switch method works but , before fired ng-switch , while first loading of webpage htmls are visible for a second and after unvisible (sometimes not doing maybe it is about cookies) , it is looking bad for user experiance and it is not look like professional .

Shortly; Angular hide elements after page rendered

i think , Users never see this situation.

How can i hide this situation ?

Solution for codeMirror issue; According to answers ng-cloak is the true answer of this issue but if you use codeMirror code editor , it is crashing with ng-cloak , In order to solve this problem you should use this module ; https://github.com/angular-ui/ui-codemirror

Upvotes: 0

Views: 657

Answers (2)

Phuong Nguyen
Phuong Nguyen

Reputation: 3070

You may want to look at this: https://docs.angularjs.org/api/ng/directive/ngCloak

Put this in your css file: 

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

Then put ng-cloak attribute on the element that you want to be hidden temporarily when the page load. When angular finishes all the binding, it will remove ng-cloak

Upvotes: 2

vittore
vittore

Reputation: 17579

Use ng-cloak

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

Upvotes: 1

Related Questions