Show and Hide Directives in AngularJS

Description

Same like Java-Script and Jquery, In AngularJS we can show and hide HTML elements, and it is very easy to show and hide HTML elements by using ng-show and ng-hide directives.

ng-show and ng-hide takes boolean variable or expressions that evaluates to boolean

How to use

• ng-show - This directive can show the HTML elements if and only if when it will take "1" or "TRUE", If it takes "0" or "FALSE" then it will never show the HTML element.
  
  
  Syntax
  
  

  <!-- If value is TRUE -->
  <ANY ng-show="TRUE">
  This will Always show
  </ANY>

  <!-- If value is FALSE -->
  <ANY ng-show="FALSE">
  This will Never show
  </ANY>

• ng-hide - This directive is just vice-versa of ng-show. This directive can hide the HTML elements if and only if when it will take "1" or "TRUE", If it takes "0" or "FALSE" then it will never hide the HTML element.
  
  
  

  <!--If value is TRUE-->
  <ANY ng-hide="TRUE">
  This will Always Hide
  </ANY>

  <!--If value is FALSE-->
  <ANY ng-hide="FALSE">
  This will Never hide
  </ANY>