Carlos Cifuentes
AngularJS → Angular reference

ng-switch in modern Angular

ng-switch becomes the built-in @switch block. It needs no wrapper element and no import.

Before · AngularJS
<div ng-switch="vm.order.status">
  <span ng-switch-when="pending">Pending</span>
  <span ng-switch-when="shipped">Shipped</span>
  <span ng-switch-default>Unknown</span>
</div>
After · Angular
@switch (order().status) {
  @case ('pending') { <span>Pending</span> }
  @case ('shipped') { <span>Shipped</span> }
  @default { <span>Unknown</span> }
}

What changes

  • ng-switch-when becomes @case, and ng-switch-default becomes @default.
  • @case compares with ===, and each case takes any expression instead of a string attribute.
  • There is no fallthrough: only the matching block renders, and no break is needed.

Migration tip. AngularJS matched ng-switch-when values as strings, so a numeric status of 1 matched when='1'. @case uses strict equality, so check the real type of the value before converting.

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