ng-if / ng-show / ng-hide en Angular moderno

ng-if pasa a ser el bloque @if, con @else incluido. ng-show y ng-hide pasan a ser un binding al atributo nativo hidden o a una clase.

<div ng-if="vm.isAdmin">Admin panel</div>
<div ng-if="!vm.isAdmin">No access</div>
<p ng-show="vm.loading">Loading…</p>

@if (isAdmin()) {
  <div>Admin panel</div>
} @else {
  <div>No access</div>
}
<p [hidden]="!loading()">Loading…</p>

Qué cambia

• @if quita el elemento del DOM, igual que ng-if.
• @else y @else if reemplazan los pares de ng-if con condiciones opuestas.
• [hidden] mantiene el elemento en el DOM, igual que ng-show.

Relacionado

• ng-model
• ng-class / ng-style
• $scope
• ng-repeat