Angular v18.1: Exciting New Features and Enhancements

Angular v18.1 introduces exciting new features and enhancements, including full support for TypeScript 5.5, making development smoother and more efficient. With the new @let syntax for cleaner template variables, improved afterRender APIs, and RouterLink enhancements, developers can expect better performance and flexibility. Explore these updates and other powerful tools like WebAssembly support in this release.

TypeScript 5.5 Integration

Angular v18.1 now fully supports TypeScript 5.5, allowing you to leverage its latest features. This includes improved type inference, which simplifies type guards when filtering arrays. Dive into TypeScript 5.5 release notes for more details.

New @let Syntax

One of the standout features in this release is the new `@let` syntax for Angular templates. This developer-preview feature lets you define template variables directly in your HTML, eliminating the need to declare them in the component class. For instance:

@let countPlustwo = count + 2;
<p>{{ countPlustwo }}</p>

The variable updates automatically if `count` changes. This is also compatible with the async pipe:

@let user = user$ | async;
@if (user) {
  <p>{{ user.name }}</p>
}

Note: Variables must be declared before use and names must be unique within a template.

Enhanced afterRender/afterNextRender APIs

The `afterRender` and `afterNextRender` APIs have been updated to remove the phase parameter. Instead, you now specify phases using an object. This change improves efficiency by consolidating read and write phases into a single call:

afterNextRender({
  write: () => {
    // Initialization code here
  }
});

toSignal Equality Function

The `toSignal` function now supports a custom equality function through the `equal` parameter, enhancing flexibility in signal comparisons.

RouterLink with UrlTree

You can now pass an `UrlTree` to the `RouterLink` directive, offering more control over navigation. Example:

export class HomeComponent {
  userPath = inject(Router).createUrlTree(["/users", user.id]);
}

Router browserUrl Option

A new `browserUrl` option for `NavigationBehaviorOptions` allows you to set the displayed URL in the browser’s address bar without altering the internal router state:

const canActivate: CanActivateFn = () => {
  // Implementation here
  return new RedirectCommand(redirect, { browserUrl: targetOfCurrentNavigation });
};

Extended Diagnostic for Uncalled Functions

Angular now warns about uncalled functions in event bindings, helping to ensure correct function invocation:

<button (click)="addUser">Add user</button>

Angular CLI Enhancements

• Faster Builds with isolatedModules: Enabling `isolatedModules` boosts build performance by switching to esbuild for transpilation.
• WASM Support: Web Assembly is now supported in zoneless applications.
• Inspect Option: Debug server-side code using `ng serve --inspect`.
• Chunk Optimizer: An experimental feature to reduce the number of chunk files generated during the build.
  
  Enjoy exploring these new features and optimizations in Angular v18.1!