How to use the actual use of ng-Cloak directive in AngularJs?

Question

What is the ng-cloak directive?
Why do we use it?

Have you seen superman aka clark kent and his epic move where he unbuttons his shirt showing his suit partially in a dark alley. Now what if he crossed the whole alley while he has not yet undressed completely and transformed into a superhero with his shiny suit with an underwear over it, whoops. So cartoonist made sure that the alley was long enough to not happen that mishap. And yes here the alley is our beloved ngcloak, clark kent is html and superman obviously is angularjs. ;) — Ashish Gaur, Feb 14 '15 at 10:29
It might help http://www.code-sample.com/2015/02/ng-cloak-directive-in-angularjs.html — Anil Singh, Jul 12 '16 at 16:50
@AnilSingh Hi Anil, will you be able to help on this Kendo issue https://stackoverflow.com/questions/61334924/kendo-grid-clienttemplate-if-else-condition — adityaa, Apr 21 '20 at 05:46

score 47 · Accepted Answer · edited Jan 08 '21 at 14:48

ng-cloak

From the docs:

The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.

In brief words, you can use ng-cloak directive to prevent uncompiled elements from being displayed. Uncompiled element can be an element that hold and wait for incoming data:

<div ng-cloak>{{myvar}}</div>

if myvar controller still not compiled or the data is not populated ng-cloak prevent {{myvar}} from being displayed and will only display the div when the variable is compiled.

Follow this code example and check to results with and without ng-cloak:

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

<body ng-controller="MyController" ng-cloak>
    <h3>ngCloak Example</h3>
        <ol >
            <li ng-repeat="item in myData">
                {{item.title}}
            </li>
        </ol>
</body>


var myApp= angular.module("myApp",['ngResource']);

myApp.controller("MyController", ["$scope", "$resource","$timeout",
    function($scope,$resource,$timeout){
        $scope.myData =[];

        var youtubeVideoService = $resource("https://gdata.youtube.com/feeds/api/videos?q=googledevelopers&max-results=5&v=2&alt=jsonc&orderby=published");

        youtubeVideoService.get()
            .$promise.then(function(responseData) {
        
        angular.forEach(responseData.data.items,
            function(aSingleRow){
                console.log(aSingleRow);
                $scope.myData.push({
                    "title":aSingleRow.title
                }); 
            });
        }); 
}]);

when would you NOT want to have ng-cloak? it seems there is no downside — WindowsMaker, Oct 05 '16 at 01:19

score 12 · Answer 2 · answered Dec 02 '15 at 09:03

The reason given for using ng-cloak Ben is valid, however the outcome of the example provided by Ben will in some situations still display the {{var}}. This is particularly true in the wild when scripts are generally loaded asynchronously or placed at the bottom of any html body.

In Ben's example he's put a <style> at the top but doesn't use it, we should placed the ng-cloak class on the <body>, like so, and use that styling:

<body class="ng-cloak" ng-controller="MyController" ng-cloak> ...

This way the content of the body tag will not be shown until Angular changes ng-cloak to display: block or the directive updates the tagged html.

The reason for adding the class is because the ng-cloak directive is parsed after the html has been displayed, so there is always the possibility that your JS thread dies and still displays anything like {{something here}}.

A good example of proper use would be to include the class="ng-cloak" and ng-cloak directive on an ng-repeat directive.

However, if its just the {{}} thats annoying and otherwise the page is fine even when JS thread has crashed, its better to use ng-bind on your tags rather than adding {{}} within them.

score 1 · Answer 3 · answered Sep 08 '17 at 07:02

One note I would like to add - I have seen for most of the application, just adding the ng-cloak doesn't work. Its because that page might be larger and js not being loaded till that time.

Applying manually CSS for this directive would help here -

[ng-cloak]  
{  
display: none !important;
}

Hope this would be help to someone!

How to use the actual use of ng-Cloak directive in AngularJs?

3 Answers3

ng-cloak