Angular 19: Die neue ResourceAPI

Mit Angular 19 führt das Framework eine neue und spannende Funktion ein: die ResourceAPI. Diese API ist darauf ausgelegt, die Arbeit mit HTTP-Anfragen einfacher, strukturierter und effizienter zu gestalten. Aber vor allem hebt es diese in die Welt der Signals. Hiermit geht das Angular-Team einen weiteren und essentiellen Schritt, Angular komplett auf Signals umzustellen.

In diesem Blogbeitrag werfen wir einen Blick darauf, was die Resource API ist, welche Vorteile sie bietet und wie sie verwendet werden kann.

---

Was ist neu?

Mit Angular 19 kommt die ResourceAPI. Diese vereinfacht das asynchrone Laden von Daten erheblich und bietet eine reaktive Schnittstelle für die Arbeit mit Ressourcen.

Achtung, die ResourceAPI ist noch Experimental. Von einem produktiven Einsatz rate ich dringend ab.

---

Was versprechen wir uns davon?

• Vereinfachte Datenabholung - Weniger Boilerplate und bessere Lesbarkeit
• Reaktivität - Mit Signals anstatt RxJS
• Bessere Kontrolle - Effizienteres verfolgen des Status von Anfragen und verwalten von Fehlern, Reloads und Responses

---

Wie nutzt man die API?

Als beispielhaftes Backend nutze ich in folgenden Beispielen die API von restful-api.dev.

Folgend erstellen wir eine Component in einem Angular 19 Projekt, mit inline Template und Styles.

ng g c ApiResourceDemoComponent --inline-style=true --inline-template=true --change-detection=OnPush --skip-tests=true

In dieser Component möchten wir einen Datensatz laden, Fehler- und Loading-State darstellen sowie nach erfolgreichem abholen der Daten diese darstellen.

Hierzu nutzen wir die neue ResourceAPI.

import { JsonPipe } from '@angular/common';
import { ChangeDetectionStrategy, Component, resource, signal } from '@angular/core';


@Component({
  selector: 'app-api-resource-demo',
  imports: [JsonPipe],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div>
      @if(dataResource.isLoading()) {
        <span>Loading...</span>
      }
      @if(dataResource.error()) {
        <span>Error while loading data </span>
      }
      @if(!dataResource.isLoading() && dataResource.hasValue()) {
        <pre>{{ dataResource.value() | json }}</pre>
      }
      <br>
      <hr>
      <button (click)="onReload()" [disabled]="dataResource.isLoading()">Reload data</button>
    </div>
  `,
})
export class ApiResourceDemoComponent {
    protected readonly id = signal(1);
    protected readonly dataResource = resource({
      request: () => ({id: this.id()}),
      loader: async ({request, abortSignal}) => await (await fetch(`https://api.restful-api.dev/objects/${request.id}`, { signal: abortSignal })).json()
    });


    protected onReload() {
      this.dataResource.reload();
    }
}

Das ID Signal steht hier exemplarisch für eine in irgend einer Art von außen gesetzte Variable.
Die dataResource wird aus dem Request und dem Loader zusammengesetzt. Der Request ist hier eher ein Parameter, das Angular Team ist sich hier im Naming selbst noch nicht 100% sicher.
Der Loader bildet den wirklichen HTTP Request ab, der hier via fetch gelöst wird. Das Abort-Signal ermöglicht es, den Request vorzeitig abzubrechen.

Die Resource ermöglicht es, abzufragen ob der Request noch in Gange ist (isLoading), ob ein Fehler aufgetreten ist (error) und ob der Request mit Daten beantwortet wurde (hasValue und value).
Weiterhin ermöglicht sie es auf einfachstem Wege ein Reload durchzuführen.

---

Fazit

Die ResourceAPI ist ein leistungsstarkes Werkzeug, das die Entwicklung von Angular-Anwendungen vereinfacht, wenn man asynchrone Daten in Ihrer Anwendung verwaltet. Kommen Sie bei Fragen gerne via Kommentare oder direkt über meine Website auf mich zu.

---

Weitere Ressourcen

• Offizielle Dokumentationen
• Ausführlichere Beispiele von den Angular-Architects