New Angular 17-18 Syntax @for, @empty, $index, $count, $first, $last, $even, $odd

New Angular 17-18 Syntax for, empty, index, count, first, last, even, odd: Enhancements and Features

Exploring the New Angular 17-18 Syntax: Enhancements and Features

Angular 17 and 18 bring a series of exciting updates to the framework, continuing its trend of making frontend development faster, more efficient, and easier to maintain. One of the most notable changes in this release is the introduction of a new syntax for template-driven loops and conditionals, which simplifies common patterns such as iterating over collections and handling empty states.

A Closer Look at the New `@for` and `@empty` Syntax

In previous Angular versions, you would typically use the *ngFor directive for looping over a collection in templates, and handling empty states required additional logic or the *ngIf directive. Angular 17-18 introduces a cleaner, more expressive syntax that combines iteration, tracking, and condition handling in a single block. Here’s a breakdown of how it works:

htmlCopy code@for (course of courses; track course.id; let index = $index; let count = $count;
    let first = $first; let even = $even; let odd = $odd) {

    <h1>Count: {{count}}</h1>
    <course-card
      (courseSelected)="onCourseSelected($event)"
      [index]="index"
      [course]="course"
      [class.is-first]="first"
      [class.is-last]="$last"
      [class.is-even]="even"
      [class.is-odd]="odd"
    />
  }
  @empty {
    <h1>No courses found!</h1>
  }

Please, note, that you can use any variable name instead of, for example, even variable, for example, you can change even to evenNumber and use it in template.

Also nobody prohibites to use all these variables in template directly with dollar sign like $last in this above example - in this case you don't need to assign this internal Angular variable $last to another variable and use it directly in template like $last (there should be any another of these variables - $even, $odd, $index, $first).

This new syntax introduces the following improvements:

1. Simplified Loop Syntax (`@for`)

The @for directive provides a clear and concise way to iterate over a collection. Instead of multiple directives or external logic, the iteration and tracking of properties are all handled in one block.

Track by logic: The track keyword enables developers to efficiently track changes in the loop using a specific key, such as course.id. This is equivalent to the trackBy function in the older *ngFor syntax but is more intuitive in this new context.
Index, count, and other context variables: The syntax allows multiple context variables to be defined in one place, such as index, count, first, even, and odd, which can be used directly inside the loop. This makes managing loop-specific variables much easier and clearer.

2. Handling Empty States (`@empty`)

Instead of adding an additional *ngIf condition to handle an empty state, the new @empty block provides a straightforward way to define what should be displayed when the list is empty. This feature ensures that empty state handling is built right into the iteration structure, promoting cleaner and more maintainable code.

Example: If the courses array is empty, the @empty block will be executed, displaying a message such as <h1>No courses found!</h1>. This eliminates the need for extra conditional checks outside the loop and improves readability.

3. Class Binding Enhancements

The new syntax makes it simple to apply class bindings based on context variables such as first, even, odd, and $last. For example:

htmlCopy code[class.is-first]="first"
[class.is-last]="$last"
[class.is-even]="even"
[class.is-odd]="odd"

This allows for easy customization of CSS classes based on the loop’s state, enhancing the ability to style components dynamically.

Key Benefits of the New Syntax

Improved Readability: The combination of @for and @empty makes templates more expressive and easier to understand at a glance. It reduces the clutter caused by multiple directives, leading to cleaner code.
Less Boilerplate Code: Developers no longer need to write separate *ngIf and *ngFor directives or handle empty states with additional logic. Everything is handled in one cohesive block.
Contextual Variables: Direct access to index, count, first, even, odd, and other contextual variables within the loop simplifies component design, especially when dealing with complex lists or grids.
Performance Optimization with Track: The ability to easily track items in the loop using track ensures efficient rendering, especially for large lists. This feature minimizes DOM re-renders and improves application performance.

Transition from Previous Syntax

For developers who are accustomed to the old *ngFor directive, transitioning to the new syntax is relatively simple. Here’s how the same functionality would have been handled in Angular 16:

htmlCopy code<div *ngFor="let course of courses; let i = index; let isFirst = first; let isEven = even">
  <h1>Count: {{courses.length}}</h1>
  <course-card
    (courseSelected)="onCourseSelected($event)"
    [index]="i"
    [course]="course"
    [class.is-first]="isFirst"
    [class.is-last]="i === courses.length - 1"
    [class.is-even]="isEven"
    [class.is-odd]="!isEven"
  ></course-card>
</div>
<div *ngIf="courses.length === 0">
  <h1>No courses found!</h1>
</div>

While this approach works perfectly fine, it requires more boilerplate code and handling. The new syntax streamlines the process by incorporating these operations into a more compact, readable format.

Conclusion

The introduction of the @for and @empty syntax in Angular 17 and 18 demonstrates the framework’s continuous evolution toward more developer-friendly and efficient coding practices. By reducing boilerplate and enhancing the readability of templates, this new syntax makes working with loops and conditional rendering much smoother. Developers can now write more concise, maintainable, and performance-optimized code with less effort.

As Angular continues to innovate, adopting these new syntaxes will help developers stay at the forefront of modern web development practices while enjoying a more streamlined workflow.

Stay tuned for more updates on Angular’s ever-growing ecosystem, as we delve deeper into the exciting new features and improvements in future articles!