Angularjs Difference ng-show and ng-if

Question

What is the difference between using ng-if and ng-show/ng-Hide ?

Answer 1

ng-show/ng-hide

Both work with the CSS property display. If the expression of ng-show return false or ng-hide return true, then the element will be hidden using display: none. In the contrary cases of both directives, the value of the property display is not altered.

This means, for example, if you already have a display: none in its element, this value is not changed.

Example:

<!-- Vai ocultar -->
<div ng-show="false"></div>

<!-- Vai ocultar -->
<div ng-hide="true"></div>

<!-- Vai continuar com o display atual -->
<div ng-show="true"></div>

<!-- Vai continuar com o display atual -->
<div ng-hide="false"></div>

In fact, you will notice that Angular uses a class .ng-hide whose only property is display: none, instead of defining an inline CSS in the element.

ng-if

Removes the DOM element when the expression returns false, and return it to the GIFT when it returns true.

Example:

<!-- Vai deixar o elemento do DOM -->
<div ng-if="true"></div>

<!-- Vai remover o elemento do DOM -->
<div ng-if="false"></div>