Carlos Cifuentes
AngularJS → Angular reference

ng-repeat in modern Angular

ng-repeat becomes the built-in @for block. It is part of the template syntax, needs no import, and requires a track expression.

Before · AngularJS
<li ng-repeat="user in vm.users track by user.id">
  {{ user.name }}
</li>
<li ng-if="!vm.users.length">No users</li>
After · Angular
@for (user of users(); track user.id) {
  <li>{{ user.name }}</li>
} @empty {
  <li>No users</li>
}

What changes

  • track is mandatory: use a stable id, not the index, for lists that change.
  • @empty replaces the extra ng-if for empty lists.
  • $index, $first, $last and $even still exist as implicit variables inside the block.

Migration tip. The orderBy and filter filters often used with ng-repeat have no pipe equivalent. Sort and filter in the component with a computed signal.

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