The ngClock directive is used in Angular to prevent the HTML template display from flickering while the data loads. Adding the ng-cloak at the angular js root element(ag-app) will display the view on-screen, but, only after Angular compiles the DOM elements first. To ensure flickering does not continue, follow these steps:

  • Add the ng-clock directive to your page root element. One of the perfect positions might be <body> tag of page or the root <div> element.
  • Now, apply this code to the style sheet (CSS) to apply the style of the ng-clock class.

BY Best Interview Question ON 20 Sep 2020

Example

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