AngularJS | ng-cloak Directive

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

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using or mail your article to See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.

Article Tags :


Please write to us at to report any issue with the above content.