Angular ng-cloak directive

The ng-cloak is a special type of directive with used to which used to prevent un-compile element being displayed. We can say that ng-cloak directive hold and wait to incoming data's.

In the below code, ng-cloak directive prevent to display un-compiled user name and Its not displayed before compile the user name.

       1. Without using the ng-cloak the output will display the {{ name }}
       2. With using the ng-cloak the output will display blank.


<div ng-cloack>
    <div ng-if="!users.isValid">
        {{ name }}

<!DOCTYPE html>
<html lang="en">

  <title>Using ng-cloak directive </title>
  <script src=""></script>
    var app = angular.module("ngApp", []);
    app.controller('ngController', function($scope) {
      $ = "Anil Singh";

      $scope.users = {
        isValid: true


<body ng-app="ngApp">
  <div ng-controller="ngController">
    <div ng-cloak ng-if="!users.isValid">
      {{ name}}


The Result looks like,

About Blogger


Hey! I am Anil Singh. I am Active Blogger, Writer and Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...

    Blogger Comment
    Facebook Comment
SQL Server NodeJs TypeScript JavaScript Angular SQL Server My Book