Angular 19 Release - What’s new?

Angular19 introduces a suite of cutting-edge features and improvements designed to enhance development efficiency and application performance. This release emphasises innovative reactive primitives, streamlined asynchronous operations, and refined effect handling. Dive into this overview to explore the exciting updates that can take your Angular projects to new heights.

New Experimental Reactive Primitive: linkedSignal

The linkedSignal is a writable signal that dynamically updates based on changes to a source signal and recalculates its value using a defined computation function. It also allows manual value adjustments while staying synchronized with the source signal.

Key API Details:

How It Works:

Initialization: The initial value is derived from the computation function.

Manual Updates: You can set the signal value manually using the set method.

Dynamic Updates: When the source signal changes, the linked signal recalculates its value using the computation function.

Example:

When the colorOptions signal updates, the favoriteColorId signal recalculates its value. If the selected color is no longer available, its value resets to null.

New Experimental API: resource

The resource API is a powerful tool for managing asynchronous operations with built-in support for race condition prevention, error handling, and manual state updates.

Features:

• Automatically re-fetches when the request signal changes.
• Tracks loading state (isLoading, error, etc.).
• Supports manual updates (update) and reloads (reload).

Example:

This approach ensures efficient data fetching and error management, while automatically syncing with changes in the fruitId signal.

RxJS Integration:

The rxResource variant offers compatibility with RxJS by using an Observable in the loader function.

Enhancements to effect() Function

The effect() function has been revamped for better usability and performance:

Signal Writes Simplified:

• The allowSignalWrites flag has been removed.
• Developers can now set signals within effect() without restrictions.

Improved Execution Timing:

• Effects are executed during the component’s change detection cycle instead of as microtasks.
• This ensures better alignment with the component tree and resolves timing issues.

Example:

These changes make effect() more intuitive and aligned with real-world development needs, providing smoother integration with Angular’s reactive ecosystem.

New API: afterRenderEffect

The afterRenderEffect function is an experimental API introduced in Angular, designed for handling side effects that depend on state changes and must execute after the DOM is updated. Unlike other post-render lifecycle hooks, it tracks specified dependencies and re-executes only when those dependencies change, making it ideal for ongoing, reactive post-render tasks.

How It Differs from afterRender and afterNextRender:

• afterRenderEffect: Executes after the render cycle but only when tracked dependencies change.
• afterRender and afterNextRender: Always run after every render cycle without tracking any dependencies.

Example:

In this example:

• afterRender executes after every render cycle, regardless of changes to counter.
• afterRenderEffect runs only when counter changes, making it a more efficient choice for dependency-aware side effects.

Stable Feature: Template Variable Syntax @let

Angular 19 brings stability to the @let syntax, first introduced in Angular 18.1. This feature allows developers to define and reuse variables directly within templates, streamlining code and eliminating less ergonomic workarounds.

Key Features of @let:

Define and Use Variables: Store expressions or values directly in templates.

Scoping: Variables are read-only and scoped to the current template and its descendants.

Predictability: Immutable variables make templates easier to understand and debug.

Example Usage:

Benefits of @let:

• Simplifies data manipulation in templates.
• Removes the need for repetitive code or complex workarounds.
• Enhances readability and maintainability by keeping logic encapsulated within the template.

The @let syntax is a game-changer for Angular templates, offering a more concise and readable way to manage template-specific data while maintaining the immutable nature of template variables.

New routerOutletData Input for RouterOutlet

Angular 19 introduces the routerOutletData input to the RouterOutlet directive, offering a seamless way for parent components to pass data to child components rendered through the outlet. This data is dynamically accessible in child components via the ROUTER_OUTLET_DATA token, which uses a Signal type. This ensures that updates to the input automatically propagate to the child, eliminating the need for static assignments.

Example:

Parent Component:

Child Component:

This enhancement enables reactive data sharing between parent and child components, aligning with Angular’s signal-based approach for state management.

RouterLink Now Accepts UrlTree :

Starting in Angular 18.1, the RouterLink directive allows passing an object of type UrlTree as its input. This supports including additional options, such as query parameters and fragments, directly in the UrlTree.

Example:

However, Angular restricts combining a UrlTree with other inputs like queryParams or fragment. Attempting this will result in an error:

‘Cannot configure queryParams or fragment when using a UrlTree as the routerLink input value.’

This improvement simplifies navigation configuration by centralizing all options in a single object.

Default Query Parameter Handling Strategy

Angular 19 lets you define a global default strategy for query parameters in your routing configuration. Previously, query parameter handling strategies could only be set on a per-navigation basis. Now, they can be specified globally using the provideRouter function.

Example:

Available strategies:

• preserve: Retains existing query parameters across navigations.
• merge: Combines new query parameters with existing ones.
• replace (default): Replaces all query parameters.

This global configuration simplifies route handling and ensures consistent query parameter behavior.

Standalone by Default

Angular 19 sets standalone: true as the default for components, directives, and pipes. This marks a major shift from v14, where standalone components were introduced, streamlining development and simplifying Angular’s architecture.

Standalone Component Example:

Standalone Component

Non-Standalone Component Example:

For non-standalone components, an explicit standalone: false flag must be defined:

Non-Standalaone Component

Benefits:

Simplified Lazy Loading: Enhances modularity and performance.

Improved Accessibility: Makes Angular easier for new developers to learn.

Migration Support: The ng update command will automatically migrate projects, ensuring compatibility.

This change paves the way for a leaner, more intuitive framework while retaining flexibility for legacy projects.

Summary: Angular 19 brings a host of exciting updates aimed at enhancing app performance, simplifying reactivity, and giving developers greater control. With improved state management, streamlined setup, and features that make development faster and more efficient, this release takes Angular to the next level. Additionally, experimental advancements like Incremental Hydration and Server Route Configuration showcase Angular’s ongoing evolution toward greater flexibility and efficiency.

We’d love your feedback — share your thoughts on these updates and how they align with your development needs. Let us know what you think about Angular’s future direction!