Carlos Cifuentes
AngularJS → Angular reference

ng-if / ng-show / ng-hide in modern Angular

ng-if becomes the @if block, with @else built in. ng-show and ng-hide become a binding to the native hidden attribute or a class.

Before · AngularJS
<div ng-if="vm.isAdmin">Admin panel</div>
<div ng-if="!vm.isAdmin">No access</div>
<p ng-show="vm.loading">Loading…</p>
After · Angular
@if (isAdmin()) {
  <div>Admin panel</div>
} @else {
  <div>No access</div>
}
<p [hidden]="!loading()">Loading…</p>

What changes

  • @if removes the element from the DOM, like ng-if did.
  • @else and @else if replace pairs of opposite ng-if conditions.
  • [hidden] keeps the element in the DOM, like ng-show did.

Migration tip. Check your CSS: a display rule on the element overrides the hidden attribute. Use a class binding when the element has its own display style.

Related

Planning a migration or a micro-frontend platform?

In a 20-minute call you describe your situation and I tell you how I'd approach it. If it isn't worth doing yet, I'll say so.

Message me on LinkedIn