Open In App

AngularJS ng-cloak Directive

Last Updated : 16 Aug, 2022
Comments
Improve
Suggest changes
Like Article
Like
Report

In this article, we will see how to prevent the document from getting rendered the AngularJS code in an unfinished manner while the code is being loaded with the help of the ng-cloak Directive in AngularJS.

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 holds and waits for the incoming data.

Syntax:

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

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

HTML 
<!DOCTYPE html>
<html>

<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
    <title>AngularJS ng-cloak Directive</title>
</head>

<body ng-app="" style="text-align:center">
    <h2 style="color:green">GeeksForGeeks</h2>
    <h2 style="color:purple">AngularJS ng-cloak</h2>
    <p ng-cloak>{{ 10 + 10 }}</p>

</body>
</html>

Output: 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.

Example 2: This example describes the ng-cloak Directive in AngularJS.

HTML 
<!DOCTYPE html>
<html>

<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
</head>

<body style="text-align:center">
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>ng-cloak Directive</h3>
    <div ng-app="">
        <p>
            Use a comma to separate the 
            texts in the input field
        </p>
        <input ng-model="content" ng-list/> 
        <pre ng-cloak>{{content}}</pre> 
    </div>
</body>
</html>

Output:

 

S
SohomPramanick
Improve
Article Tags :

Explore

Lightbox