Define ng-if, ng-show and ng-hide - GeeksforGeeks

24 Jun, 2020
In this article, we will be explaining about ng-if, ng-show and ng-hide directive.
ng-if Directive:The ng-if Directive in AngularJS is used to remove or recreate a portion of HTML element based on an expression.If the expression inside it is false then the element is completely removed from the DOM.if the expression is true then the element will be added to the DOM.Syntax:<element ng-if="expression"></element>
Example:In following Example, When there is any text in input element then div content will be shown otherwise it will be hidden.<!DOCTYPE html><html><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script><body ng-app="">  Enter Text:<input type="text" ng-model="textcheck">  <div ng-if="textcheck"><h1 style="color:green">GeeksforGeeks</h1></div>  </body></html>Output:When there is any text in the input field, Heading div is added to HTML DOM and is shown but when the input field is empty, div is removed and is not shown.
The ng-if Directive in AngularJS is used to remove or recreate a portion of HTML element based on an expression.
If the expression inside it is false then the element is completely removed from the DOM.
if the expression is true then the element will be added to the DOM.
Syntax:
<element ng-if="expression"></element>

Example:
In following Example, When there is any text in input element then div content will be shown otherwise it will be hidden.
<!DOCTYPE html><html><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script><body ng-app="">  Enter Text:<input type="text" ng-model="textcheck">  <div ng-if="textcheck"><h1 style="color:green">GeeksforGeeks</h1></div>  </body></html>
Output:
When there is any text in the input field, Heading div is added to HTML DOM and is shown but when the input field is empty, div is removed and is not shown.
ng-show Directive: The ng-show Directive in AngluarJS is used to show or hide the specified HTML element.If given expression in ng-show attribute is true then the HTML element will display otherwise it hide the HTML element.Syntax:<element ng-show="expression"> </element> Example:In the following Example, When their checkbox is selected then div content will be shown otherwise it will be hidden.<!DOCTYPE html>  <html>    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">    </script><body ng-app="">  <input type="checkbox" ng-model="check">  <div ng-show="check">  <h1 style="color:green">GeeksforGeeks</h1></div>  </body></html>Output:When the Check box is selected, the HTML attribute div are set to show, otherwise hide them.
If given expression in ng-show attribute is true then the HTML element will display otherwise it hide the HTML element.
Syntax:
<element ng-show="expression"> </element> 
Example:
In the following Example, When their checkbox is selected then div content will be shown otherwise it will be hidden.
<!DOCTYPE html>  <html>    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">    </script><body ng-app="">  <input type="checkbox" ng-model="check">  <div ng-show="check">  <h1 style="color:green">GeeksforGeeks</h1></div>  </body></html>
Output:
When the Check box is selected, the HTML attribute div are set to show, otherwise hide them.
ng-hide Directive: The ng-hide Directive in AngluarJS is used to show or hide the specified HTML element.If the expression given in the ng-hide attribute is true than the HTML elements hide.ng-hide is also a predefined CSS class in AngularJS, and sets the element’s display to none.Syntax: <element ng-hide="expression"> </element> 
Example:In this example, If checkbox is selected this means ng-hide attribute is true and the HTML elements will hide.<!DOCTYPE html>  <html>    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">    </script><body ng-app="">  Show DIV:<input type="checkbox" ng-model="check">     <div ng-hide="check">   <h1 style="color:green">GeeksforGeeks</h1></div>  </body></html>Output:When the Check box is selected, the HTML attribute div are set to hide, otherwise show them.
If the expression given in the ng-hide attribute is true than the HTML elements hide.
ng-hide is also a predefined CSS class in AngularJS, and sets the element’s display to none.
Syntax:
 <element ng-hide="expression"> </element> 

Example:
In this example, If checkbox is selected this means ng-hide attribute is true and the HTML elements will hide.
<!DOCTYPE html>  <html>    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">    </script><body ng-app="">  Show DIV:<input type="checkbox" ng-model="check">     <div ng-hide="check">   <h1 style="color:green">GeeksforGeeks</h1></div>  </body></html>
Output:
When the Check box is selected, the HTML attribute div are set to hide, otherwise show them.
Basic Difference between ng-if, ng-show and ng-hide
Hence, there is a considerable difference between ng-if, ng-show and ng-hide directive which makes them different for their usages .
AngularJS-Misc
Picked
AngularJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Auth Guards in Angular 9/10/11
How to bundle an Angular app for production?
What is AOT and JIT Compiler in Angular ?
Angular PrimeNG Dropdown Component
How to set focus on input field automatically on page load in AngularJS ?
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?