Post
Ask Question

ng-hide Directive in AngularJS

ng- hide directive is used to make HTML elements invisible. Let us see this with the help of an example.

Write the following HTML mark up in the webpage.

  1. <!doctype html>  
  2. <htmlng-app>  
  3.   
  4.     <head>  
  5.         <title>My Angular App</title>  
  6.         <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>  
  7.     </head>  
  8.   
  9.     <body>  
  10.         <div ng-app="">  
  11.   
  12.             <p ng-hide="true">This text is not visible.</p>  
  13.   
  14.             <p ng-hide="false">This text is visible.</p>  
  15.   
  16.         </div>  
  17.     </body>  
  18.   
  19. </html>  
We have taken twp<p> tags in HTML. In one of the tags we will assign a value false to the ng-hide directive and in the other we will keep the value to true. Let us see how the output turns out.

Output

This is how we can use ng-hide directive in AngularJS.