Wednesday, July 29, 2015

Prevent Flickering of AngularJS page load using ng-clock

Flickering is a common problem of DOM manipulation using AngularJS. If page is huge then it shows “{{}}” braces before manipulation of DOM. Anyway, the solution is very simple.

ng-cloak directive was added to Angular in order to prevent the flickering of elements before your application has fully loaded. It then removes ng-cloak once it has had a chance to compile your 
views.

      1)      Add ng-clock directive to your page root element. One perfect position may be <body> tag of page or root <div> element.
<div ng-cloak>

      2)      Apply below style sheet to apply style of ng-clock class.  

<style>
    
[ng:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
  display: none !important;
}
</style>

       And your problem is solved !.


1 comment: