New release: Angular v19 and top features

On November 19, 2024, Angular officially released version 19, continuing its commitment to enhancing the developer experience and pushing the boundaries of web application efficiency. Each year, Angular introduces innovative features, and this release is no exception.

Angular 19 is a stable release, bringing key performance enhancements and developer productivity improvements along with a few experimental features. In their official announcement, the Angular team stated, “Seeing the positive community response and increased engagement in our developer events validates that we’ve been moving in the right direction.”

This update focuses on optimizing application speed, refining developer workflows, and integrating some of the most highly requested features from the community. With Angular 19, building modern, high-performance web applications has never been more seamless.

In this post, we’ll dive into the key updates in Angular 19 and explore real-world examples that showcase how to take full advantage of these new features in our own Angular applications. 🚀

Built for Speed – Angular 19

Angular 19 takes performance to the next level by focusing on optimization for performance-sensitive applications and integrating out-of-the-box best practices. This release introduces incremental hydration for server-side rendering (SSR), enabling faster initial page loads and smoother interactions. Additionally, server route configuration, event replay (now enabled by default), and other enhancements push Angular’s SSR capabilities even further.

In the past, large Angular applications often shipped excessive JavaScript to users, negatively impacting performance. With Deferrable Views, previously used for client-side rendering, now extended to server-side rendering, Angular optimizes performance by deferring non-critical JavaScript loading. These advancements, along with server route configuration and automatic event replay, ensure that Angular 19 delivers high-performance, modern web applications more efficiently than ever before.

What’s New in Angular 19?

The latest release of Angular 19 brings a wealth of improvements and new features designed to enhance performance, reduce dependencies, and improve developer experience. With a strong focus on core web vitals and modern best practices, Angular 19 introduces several exciting updates:

• Route-level Render Mode – Optimizes rendering strategies at the route level for improved flexibility.
• Hot Module Replacement (HMR) – Speeds up development with live updates without full page reloads.
• Standalone Defaults – Simplifies Angular projects by making standalone components the default.
• Time Picker Component – Adds a built-in, customizable time picker for forms and UI enhancements.
• Two-dimensional Drag and Drop – Expands the drag-and-drop feature to support movement in both directions.
• Security: AutoCSP for Strict Content Security Policies
• Linked Signals – Enables better state management and reactivity.
• Event Replay – Now enabled by default, ensuring seamless user interactions after hydration.
• Modernizing Code with Language Service – Provides enhanced developer support and code intelligence.
• State of Zoneless – Moves towards a future with improved performance by reducing reliance on Zone.js.
• State of Testing Tooling – Enhances Angular’s testing ecosystem with improved tools and practices.
• Security with Google – Strengthens built-in security features with Google-backed improvements.
• Resource API – Introduces new ways to manage resources in Angular applications efficiently.

With these updates, Angular 19 continues to push the boundaries of modern web development, making it easier than ever to build high-performance, scalable, and secure applications.

Route-level Render Mode in Angular 19

In previous versions of Angular, enabling server-side rendering (SSR) meant that all parameterized routes were rendered dynamically on the server, while static routes were prerendered. However, with Angular 19, a new feature called ServerRoute provides fine-grained control over how individual routes are rendered.

This ServerRoute interface allows developers to customize rendering behavior for each route, specifying whether it should be:

• Server-rendered (SSR) for enhanced performance and security.
• Client-rendered for a more interactive and dynamic user experience.
• Prerendered to improve initial page load speed.

Defining Rendering Modes

Here’s an example of how to configure route-level rendering using serverRouteConfig:

TypeScript Example: Setting Rendering Modes

export const serverRouteConfig: ServerRoute[] = [
{ path: '/login', mode: 'server' }, // Render login on the server for better security
{ path: '/dashboard', mode: 'client' }, // Render dashboard on the client for a dynamic UI
{ path: '/**', mode: 'prerender' }, // Prerender all other routes for faster loading
];

• • The login route is rendered on the server to ensure secure authentication handling.
  • The dashboard route is rendered on the client to enable real-time interactions and a dynamic experience.
  • All remaining routes are prerendered to optimize the initial page load performance.

Prerendering with Route Parameters

Angular 19 also allows prerendering routes that include dynamic parameters using the getPrerenderPaths method. This is useful for pages that require SEO optimization, such as product pages, blog posts, or user profiles.

TypeScript Example: Prerendering Dynamic Routes

export const serverRouteConfig: ServerRoute[] = [
{
  path: '/product/:id',
  mode: 'prerender',
  async getPrerenderPaths() {
  const productService = inject(ProductService);
  const productIds = await productService.getProductIds(); // Fetch product IDs (e.g., ["1", "2", "3"])
  return productIds.map(id => ({ id })); // Generate static URLs (e.g., ["/product/1", "/product/2", "/product/3"])
 },
},
];

• getPrerenderPaths dynamically retrieves product IDs and generates prerendered pages for each product (e.g., /product/1, /product/2).
• This approach significantly boosts SEO and improves load times, especially for e-commerce or content-heavy websites.

Hot Module Replacement in Angular 19

Angular 19 introduces a major enhancement with Hot Module Replacement (HMR) for styles and templates, streamlining the development workflow by eliminating full-page refreshes after modifications.

Previously, any change to a component’s style or template triggered a full application rebuild and browser reload—an inefficient process, especially for large projects.

With HMR, Angular now selectively compiles and patches updated styles or templates in real time while preserving the application’s state. This results in faster development cycles and a smoother, uninterrupted user experience

Standalone Components by Default in Angular 19

What’s New
In Angular 19, standalone components, directives, and pipes now default to true, eliminating the need for the standalone: true metadata.

Why It Matters
This update simplifies component metadata, enhancing code readability and modularity while reducing boilerplate.

Migration
When running ng update, the Angular CLI will automatically remove standalone: true from components that no longer require it, ensuring a seamless transition.

How to enable

Add the following to your tsconfig.json:

{ 
  "angularCompilerOptions": { 
    "strictStandalone": true 
  } 
}

Time Picker Component

Angular Material provides a built-in TimePicker component that allows users to select a specific time. It is the most requested feature and offers customization options for time formats, validation, and accessibility. You can easily integrate it into your Angular applications to provide a user-friendly time selection experience.

EX:    datetimepicker.component.html

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date" [(ngModel)]="date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>
  <span>
    {{date | date:'medium'}}
  </span>
<div>
  <button cdkOverlayOrigin 
          #trigger="cdkOverlayOrigin"
          (click)="isOpen = !isOpen">
          time
  </button>
</div>
<ng-template cdkConnectedOverlay
             [cdkConnectedOverlayOrigin]="trigger"
             [cdkConnectedOverlayOpen]="isOpen"
             [cdkConnectedOverlayHasBackdrop]="true"
             [cdkConnectedOverlayBackdropClass]="'backdrop'"
             (backdropClick)="isOpen = false">
  <app-time-picker [date]="date" (setDate)="onSetDate($event)"></app-time-picker>
</ng-template>

datetimepicker.component.ts

export class DatepickerOverviewExample {
  isOpen = false;
  date;
  public onSetDate(newDate: Date) {
    this.isOpen = false;
    this.date = newDate;
  }
}

Two-dimensional Drag and Drop

The Angular CDK (Component Development Kit) offers powerful drag-and-drop functionality, including support for two-dimensional drag-and-drop. You can create flexible and interactive drag-and-drop interfaces for various use cases, such as rearranging items in a grid or transferring items between different containers. This feature can be used to implement complex drag-and-drop layouts like sortable grids or kanban boards.

EX: dragDropEg.component.html

 <div cdkDropList [cdkDropListData]="MoviesList"
    class="movie-list" (cdkDropListDropped)="onDrop($event)">
    <div class="movie-block" *ngFor="let moviesList of MoviesList" cdkDrag>{{moviesList}}</div>
  </div>

dragDropEg.component.ts

export class DragDropEg implements OnInit {
  // Transfer Items Between Lists
  MoviesList = [
    'The Far Side of the World',
    'Morituri',
    'Napoleon Dynamite',
    'Pulp Fiction',
    'Blade Runner',
    'Cool Hand Luke',
    'Heat',
    'Juice'    
  ];
  public onDrop(event: CdkDragDrop<string[]>) {
    if (event.previousContainer === event.container) {
      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
    } else {
      transferArrayItem(event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        event.currentIndex);
    }
    console.log(event.container.data);
    console.log(event.previousContainer.data);
  }
}

Linked Signals

Angular 19 introduces Linked Signals, a powerful new feature designed to simplify local state management when it depends on other signals. This feature allows us to create a writable signal that can automatically reset based on changes in other signals, ensuring state remains in sync with dynamic data.

How It Works

Linked Signals provide an efficient way to track and update local state without manually handling dependencies. When a dependent signal changes, the linked signal automatically updates, reducing the need for complex state management logic.

Common Use Cases

• Form Reset Handling: Automatically reset form fields when the associated data changes.
• Filtering and Sorting: Maintain local UI state for filters that adapt to backend data changes.
• State Synchronization: Keep UI components in sync with the global or parent state dynamically.

With Linked Signals, managing reactive state in Angular 19 becomes more intuitive and efficient, making it a valuable addition for developers working with dynamic data.

import { computed, linkedSignal } from '@angular/core';

const timestampMs = signal(Date.now());

// computed(): Signal (not writable)
const timestampSeconds = computed(() => timestampMs() / 1000);
timestampSeconds.set(0); // ❌ compilation error

// linkedSignal(): WritableSignal
const timestampSecondsLinked = linkedSignal(() => timestampMs() / 1000);
timestampSecondsLinked.set(0); // ✅ works

Note: There are some features still in developer previews, which we will discuss later; for more info, refer angular docs

Here also added a GitHub link for a demo application of Angular 19.

Conclusion

Angular 19 brings a range of powerful enhancements designed to boost performance, security, and developer productivity. From standalone components by default to the new time picker component and developer previews like linkedSignal and resource(), there’s plenty to explore.

As Angular continues to evolve, these updates ensure you’re well-equipped to build scalable, secure, and high-performance applications with greater efficiency.