Ng-show vs ng-if

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 the following Example, When there is any text in input element then div content will be shown otherwise it will be hidden.

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-s

angularjs show hide div ng if