ng-show / ng-hide

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

This means, for example, if you already have a display: none in your element, this value does not change.

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>

Actually, you will notice that Angular uses a .ng-hide class whose only property is display: none , rather than defining an inline CSS in the element.

ng-if

Removes the element from the DOM when the expression returns false , and replaces it in the DOM 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>