Skip to content
Related Articles

Related Articles

AngularJS | ng-cloak Directive

View Discussion
Improve Article
Save Article
  • Difficulty Level : Expert
  • Last Updated : 31 May, 2019

Many times, AngularJS applications would show the flickering of the HTML document when the main application gets started up. This will show the AngularJS code for quite some time. The use of the ng-cloak directive is to keep the elements in the AngularJS from being shortly presented by the web browser in a state of unfinished, incomplete, uncompiled & raw form, while the fundamental program is still on the verge of being loaded. This is basically to stop the unwanted flickering impact which gets shown many times in the beginning when the program gets loaded. The unfinished piece of data then simply hold and waits for the incoming data.


<element ng-cloak> {{the piece of code}} </element>

Example: This example shows the usage of ng-cloak directive.

<!DOCTYPE html>
<script src=
        <title>AngularJS | ng-cloak Directive</title>
<div ng-app="">
            <body style = "text-align:center">
            <h2 style = "color:green">GeeksForGeeks</h2>
            <h2 style = "color:purple">AngularJS ng-cloak</h2>
            <p ng-cloak>{{ 10 + 10 }}</p>

When we load the code:

This example would certainly load without flickering even when we don’t include the ng-cloak directive. But this tells us how to include the ng-cloak directive in an HTML element.

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!