AngularJS ng-cloak Directive with Example

Here we will learn ng-cloak directive in angularjs with the example, use of angularjs ng-cloak directive and how to use ng-cloak directive in angularjs application with simple example.

AngularJS ng-cloak Directive

The ng-cloak directive in angularjs is a special type of directive which is used to prevent showing an un-compiled form of elements while page is loading. We can say that ng-cloak directive will hold and wait till operations complete to show the elements on page.


By using ng-cloak directive in angularjs, we can prevent or avoid undesirable flicker effect to display elements on page. We can use ng-cloak directive with <body> element or we can use it in a required portion of HTML elements.

AngularJS ng-cloak Directive Syntax

Following is the syntax of using ng-cloak directive in angularjs applications.


<element ng-cloak>{{your code}}</element>

Now we will see how to use ng-cloak directive with a simple example.

AngularjS ng-cloak Directive Example

Following is the example of using ng-cloak directive in angularjs applications.


Live Preview

<!DOCTYPE html>

<html xmlns="">



AngularJs ng-cloak Directive Example


<script src=""></script>


var app = angular.module("AngularngcloakApp", []);

app.controller("ngcloakctrl", function ($scope) {

$ = "";

$scope.users = {

isValid: true





<body ng-app="AngularngcloakApp">

<div ng-controller="ngcloakctrl">

<div ng-cloak ng-if="users.isValid">

{{ name}}






In the above code sample, ng-cloak directive prevent to display un-compiled user name till it finish required conditions check and page loading. In case if we didn't use ng-cloak then output will display {{ name }} raw code till it finish all conditions. If we use ng-cloak the output will display as blank till it display all the values.

Output of AngularJS ng-cloak Example

Following is the result of ng-cloak directive example in angularjs. It will display user name once page loading and condition checking are done.

This is how we can use ng-cloak directive in angularjs to prevent showing un-complied code till page loads completely.