AngularJS ngcloak

The ng-cloak directive in Angularjs is used to hide the raw AngularJS code on the browser during the loading or compile process.
The ng-cloak directive is used to avoid the unwanted flicker effect during the loading process.
We can use the ng-cloak directive for the entire application by applied on <body> tag either we can use multiple ng-cloak directive for the smaller parts individually.
The CSS style for hide ng-cloak Directive content.

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

</style>

When the compile process complete the AngularJS Application element make the ng-cloak Directive content visible automatically.

Syntax for ng-cloak directive in AngularJS:

<element ng-cloak> </element>

Sample coding for ng-cloak directive in AngularJS:

 Tryit<!DOCTYPE html>
<html>
    <head>
        <title>Wikitechy AngularJS Tutorials</title>
        <style > 
                [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], 
                .ng-cloak, .x-ng-cloak
                    {
                        display: none !important;
                    }

        </style>
    </head>
    <body>
         <div ng-app="">
            <h3>Remove and add CSS style then Refresh the page continuously to view 
            the differences</h3> 
            <h2 ng-cloak>{{'Wiki' + 'techy'}}</h2>
        </div> 
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/
                angular.min.js"></script> 
    </body>
</html>

Code Explanation for ng-cloak directive in AngularJS:

The set of CSS style to hide the content in the ng-cloak directive.
The <h2> tag content is use ng-cloak directive.

Sample Output for ng-cloak directive in AngularJS:

The output displays the content after the page load finishes.

Using the ng-cloak directive that will be hide the content during the page load, when the compile process complete then only the content will be displayed.

Without the CSS style or ng-cloak directive that will be show the raw code of AngularJS during the page load, when the compile process complete then only the content will be displayed.

Tips and Notes

The above CSS rule will be embedded within angular.js and angular.min.js for learners understanding that will be hard coded here.

PDF

AngularJS ngcloak

Syntax for ng-cloak directive in AngularJS:

Sample coding for ng-cloak directive in AngularJS:

Code Explanation for ng-cloak directive in AngularJS:

Sample Output for ng-cloak directive in AngularJS:

Tips and Notes

Related Searches to angularjs ngclassodd directive

Wikitechy

Join our Community

Other Languages