What is the difference between ng-if and ng-show/ng-hide

Question

I'm trying to understand the difference between ng-if and ng-show/ng-hide, but they look the same to me.

Is there a difference that I should keep in mind choosing to use one or the other?

Answer 1

The difference between ng-if and ng-show/ng-hide is as follows:-

What is ngIf:-

It removes or recreates a portion of the DOM tree based on an expression. If the ngIf expression evaluates to a false value then the element is removed from the DOM, otherwise, a clone of the element is reinserted into the DOM.

See the code below:-

<div ng-if="1"></div> 

<div ng-if="0"></div>

What is ngShow:-

It shows or hides the given HTML element based on the expression provided to the ngShow attribute. The element is shown or hidden by removing or adding the ng-hide CSS class onto the element. Also, the ng-hide CSS class is predefined in AngularJS and sets the display style to none.

See the code below:-

<div ng-show="1"></div>

<div ng-show="0" class="ng-hide"></div>