Angular 19 Has a Free API You've Never Heard Of

Angular 19 is the latest major release with standalone components by default, signal-based reactivity, and incremental hydration. The new APIs make Angular simpler and faster than ever.

What's New in Angular 19?

• Standalone by default — no more NgModules for new projects
• Signal-based reactivity — fine-grained updates
• Incremental hydration — SSR with progressive hydration
• Resource API — built-in data fetching primitives
• linkedSignal — computed signals with write-back

The Hidden API: Signals

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

@Component({
  selector: 'app-counter',
  template: `
    <p>Count: {{ count() }} (doubled: {{ doubled() }})</p>
    <button (click)="increment()">+1</button>
  `
})
export class CounterComponent {
  count = signal(0);
  doubled = computed(() => this.count() * 2);

  constructor() {
    effect(() => {
      console.log(`Count changed to ${this.count()}`);
    });
  }

  increment() {
    this.count.update(v => v + 1);
  }
}

Resource API — Built-in Data Fetching

import { resource, signal } from '@angular/core';

@Component({
  template: `
    @if (users.isLoading()) {
      <p>Loading...</p>
    } @else if (users.error()) {
      <p>Error: {{ users.error() }}</p>
    } @else {
      @for (user of users.value(); track user.id) {
        <div>{{ user.name }}</div>
      }
    }
  `
})
export class UsersComponent {
  search = signal('');

  users = resource({
    request: () => ({ query: this.search() }),
    loader: async ({ request }) => {
      const res = await fetch(`/api/users?q=${request.query}`);
      return res.json();
    }
  });
}

Control Flow — New Template Syntax

<!-- New built-in control flow -->
@if (user()) {
  <h1>Welcome, {{ user().name }}!</h1>
} @else {
  <h1>Please sign in</h1>
}

@for (item of items(); track item.id) {
  <div>{{ item.name }}</div>
} @empty {
  <p>No items found</p>
}

@switch (status()) {
  @case ('loading') { <spinner /> }
  @case ('error') { <error-message /> }
  @default { <content /> }
}

<!-- Deferred loading -->
@defer (on viewport) {
  <heavy-component />
} @loading {
  <p>Loading...</p>
}

Quick Start

npm install -g @angular/cli
ng new my-app && cd my-app && ng serve

Why Teams Upgrade to Angular 19

A developer shared: "Signals replaced RxJS for 80% of our use cases. Our components are simpler, our bundle is smaller, and the new control flow template syntax is a huge readability win. Angular finally feels modern."

---

Building enterprise apps? Email [e-mail] or check my tools.

Angular signals vs React hooks vs Svelte runes — which reactivity model do you prefer?