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 

      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.  

.x-ng-cloak {
  display: none !important;

       And your problem is solved !.

1 comment: