AngularJS ng-if example

AngularJS ng-if directive removes or recreate a part of the DOM based on the evaluated value of given {expression}. If the expression evaluated value returns false then it will remove the element from DOM. If the evaluated value is true then it will reinsert the clone of the element.

Difference between ng-if vs ng-show and ng-hide



1. The ng-if directive will destroy (completely removes) the element or recreate the element. Where as ng-show or ng-hide directive will set the visibility of the element to show or hide.



2. The ng-if directive will recreate the element with the clone of compiled time element when the expression value evaluated as true. That means if you created an element using ng-if and then applying some styles using javascript then if you destroy it (ng-if expression value false)and recreate the element again then all the styles applied using javascript will be gone. Where as if you use the ng-show or ng-hide directive to hide or show the element then the style applied using javascript will still remain after show or hide. Below example will give you a clear idea about it.

Demo Gif



Live example



First Select Show Message



Then Select Apply Class







ng-if example Select the above check box to show the message







ng-show example Select the above check box to show the message

Source code



<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> .ngifcls { background: #eee; padding: 10px; font-weight: bold; } </style> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script> <script language="javascript"> function changestyle(chb) { if (chb.checked) { document.getElementById("divngifexmp").style.background = "#eee"; document.getElementById("divngifexmp").style.padding = "10px"; document.getElementById("divngshowexmp").style.background = "#eee"; document.getElementById("divngshowexmp").style.padding = "10px"; } else { document.getElementById("divngifexmp").style.background = ""; document.getElementById("divngifexmp").style.padding = ""; document.getElementById("divngshowexmp").style.background = ""; document.getElementById("divngshowexmp").style.padding = ""; } } </script> </head> <body> <div ng-app="myApp" ng-controller="myCntrl"> <input type="checkbox" ng-model="showmessage" ng-init="showmessage=false;" name="chbshwmsg" id="chbshwmsg" /> <label for="chbshwmsg"> First Select Show Message</label> <br /> <br /> <input type="checkbox" onchange="changestyle(this);" name="chbaplycls" id="chbaplycls" /> <label for="chbaplycls"> Then Select Apply Class</label> <br /> <br /> <div> Select the above check box to show the message <br /> <br /> <div ng-if="showmessage" id="divngifexmp"> ng-if example </div> </div> <br /> <br /> <div> Select the above check box to show the message <br /> <br /> <div ng-show="showmessage" id="divngshowexmp"> ng-show example </div> </div> </div> <script language="javascript"> var myapp = angular.module("myApp", []); myapp.controller("myCntrl", function ($scope) { }); </script> </body> </html>