Angular 18.2 is here, and while it's technically a minor release, it brings a set of genuinely useful enhancements for developers. This breakdown highlights the polished @let syntax and a couple of brand-new migration schematics that simplify upgrades and refactoring.

The Evolution of @let

The @let feature — a go-to for many in the Angular community — gets even better in 18.2. It now supports a couple of different ways to define variables directly in your templates, which makes your templates cleaner and more adaptable:

Dynamic @let: This new capability lets you use template reference variables inside structural directives like @for and @if. As an example, you can directly grab a form's value inside your markup like this:

<input #myForm name="my-from" [maxlength]="maxLength" />
@let formValue = myForm.value

Async @let: Previously, to get the latest emission from an observable, you had to lean on an ngIf wrapper. That's no longer your only option. Take a look at the old pattern:

@if ({ tasks:  tasks$ | async }; as taskData) {

//shows the @if block before the 1st tasks$ emit
 @for (task of taskData.tasks; track task.id) {
    [...]
  } @empty {
    No Tasks pending.
  }
}

Now you can achieve the same thing with more compact and readable code:

@let tasks = tasks$ | async;
@for (task of tasks; track task.id) {
  [...]
}
@empty {
  No Tasks pending.
}

Just a quick heads-up: @let variables are read-only. You can't assign them a new value once they're set. But their value will refresh automatically with each change detection cycle. While you can technically use the same variable names in both your template and component class, using the same identifiers in both places is something that warrants caution in the long run and might not be best practice.

Streamlined Migrations: New Schematics

Since Angular 17, developers have had three main migration schematics at their disposal:

  • Migrating to the new template control flow: ng g @angular/core:control-flow
  • Switching to the application builder: ng update @angular/cli --name use-application-builder
  • Making components standalone: ng g @angular/core:standalone

Angular 18.2 adds a couple more valuable tools to this set:

  • Converting routes for lazy loading: You can now generate lazy-loaded routes from your standalone components via ng g @angular/core:route-lazy-loading.
  • Dependency injection migration: The process of moving from constructor-based injection to the modern inject() function is handled by the new ng g @angular/core:inject-migration schematic.

Wrapping Up and What's Next

Even though 18.2 is a minor version bump, it packs a solid punch for anyone who leverages @let or wants a smoother migration path. As we look forward to the major updates planned for Angular 19 in November 2024, the upcoming 18.3 release (expected in about six weeks) should be another significant milestone. For now, it's all about moving forward with these refinements and enjoying a slightly better Angular experience.