Angular v19 Release: Standalone Components by Default and Signals Reach Stable

Angular v19 Has Been Released!

The Angular team has pushed standalone components and Signals hard over recent releases, and v19 is finally a major turning point. Personally, I think these changes will significantly improve the Angular developer experience.

Standalone components are now the default

Until now, creating a standalone component required standalone: true every time. Honestly, that was annoying.

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.scss'],
  standalone: true,  // This was required
  imports: [CommonModule, FormsModule]
})
export class ExampleComponent {}

From v19, that is no longer required. Every component is standalone by default.

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.scss'],
  imports: [CommonModule, FormsModule]
})
export class ExampleComponent {}

Migrating from NgModule-based code to standalone components is easier now. Migration tooling is available too, so existing projects can move with confidence.

Angular Signals reach stable

I keep saying Signal-Based Reactivity is the best—and now signal and computed have moved from Developer Preview to stable. I can use them in production with confidence.

These Signal APIs are also production-ready:

• input
• model
• output
• viewChild
• viewChildren
• contentChildren
• contentChild

For example, I can define Signal-based inputs like this:

@Component({
  selector: 'app-counter',
  template: `
    <p>Count: {{ count() }}</p>
    <button (click)="increment()">Increment</button>
  `,
})
export class CounterComponent {
  // Signal-based input
  count = input(0);
  
  increment() {
    // Set a new value
    this.count.set(this.count() + 1);
  }
}

New experimental APIs

v19 introduces linkSignal and resource as new experimental APIs. They are still experimental, but I am quite excited about them.

linkSignal creates local state linked to a computed expression, making it easier to manage state based on computed values.

resource is a Signal API for asynchronous values such as server data, simplifying fetch and management of async data.

Major Angular Material updates

Angular Material received a big update too. The standout is the brand-new mat.theme API.

New theme system

The new theme system is much simpler. Theme setup that used to take a lot of code is now a single call to mat.theme.

// Previous theme configuration
@use '@angular/material' as mat;
@include mat.core();

$my-primary: mat.define-palette(mat.$indigo-palette, 500);
$my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
$my-warn: mat.define-palette(mat.$red-palette);

$my-theme: mat.define-light-theme((
  color: (
    primary: $my-primary,
    accent: $my-accent,
    warn: $my-warn,
  ),
  typography: mat.define-typography-config(),
  density: 0,
));

@include mat.all-component-themes($my-theme);

// New theme configuration
@use '@angular/material' as mat;
@include mat.theme();

Overriding component styles

For developers who want to customize Angular Material components, a new API using the mat-theme-override mixin is available.

@use '@angular/material' as mat;

@include mat.theme();

// Override the button styles
@include mat.theme-override() {
  .mat-mdc-button {
    border-radius: 24px;
  }
}

Time picker added

The long-awaited Time picker is here, giving a standard UI component for time selection.

Incremental hydration

An important v19 feature is incremental hydration—Angular's next-generation hydration technology.

With incremental hydration, the main template can be rendered on the server and sent to the client still in a non-hydrated state. Then, based on application logic, parts of the template can be hydrated dynamically.

@Component({
  template: `
    <header>Static header (not hydrated)</header>
    
    @defer (on viewport) {
      <app-interactive-component></app-interactive-component>
    }
    
    @defer (never) {
      <app-static-content></app-static-content>
    }
    
    <footer>Static footer (not hydrated)</footer>
  `
})
export class AppComponent {}

This reduces overhead for static content and improves performance.

Summary

Angular v19 is an update that significantly improves the developer experience. Default standalone components, stable Signals, new experimental APIs, Angular Material improvements, and incremental hydration make Angular a more powerful, easier framework.

Personally, I am especially happy that Signal-Based Reactivity is stable—I can use it in production with confidence.

See you next time.