{"id":3482,"date":"2025-07-21T09:23:24","date_gmt":"2025-07-21T07:23:24","guid":{"rendered":"https:\/\/www.thecodecampus.de\/blog\/?p=3482"},"modified":"2026-04-09T11:28:30","modified_gmt":"2026-04-09T09:28:30","slug":"reactive-apis-in-angular-resource-api-teil-1","status":"publish","type":"post","link":"https:\/\/www.thecodecampus.de\/blog\/reactive-apis-in-angular-resource-api-teil-1\/","title":{"rendered":"Reactive APIs in Angular Teil 1 – Resource API resource() und rxResource()"},"content":{"rendered":"

Click here<\/a> for the english version of this blog post.<\/strong><\/em><\/p>\n

Reactive APIs in Angular 20: Kommuniziere asynchron mit Signals durch die Resource API<\/h2>\n

Mit Angular 19 wurde eine reactive API als neues Feature eingef\u00fchrt, die Resource API. Zwar gilt die API, auch jetzt in v20, noch als experimentelles Feature, kann aber bereits von Dir verwendet werden. Wenn Du wissen willst, was die Resource API ist, welches Problem sie l\u00f6sen kann, wof\u00fcr man sie nutzen sollte und wof\u00fcr nicht, dann bist Du hier genau richtig. Dieser Artikel ist Teil des Angular Guides<\/a>, in dem wir bereits viele spannende Themen zu Angular erforschen.\u00a0 Der Guide gibt dir einen \u00dcberblick \u00fcber aktuelle Themen, angefangen mit: Was sind eigentlich Signals und welche Vorteile bringen Sie mit?<\/p>\n

Wir f\u00fchren unser Reise durch die signal-basierten Features von Angular mit einem Einblick in die neuen Funktionen der Resource API fort. Im diesem ersten Teil betrachten wir die Grundlagen von resource()<\/code> und rxResource()<\/code>. Im zweiten Teil experimetieren wir mit der neueren httpResource()<\/code>, womit man HTTP-Requests erleichtert und diese direkt als Signal ausgeben kann.<\/p>\n

Was ist die neue Resource API?<\/h2>\n

Bisher haben sich Signals in Angular nur auf den synchronen Datenfluss konzentriert. Zust\u00e4nde abspeichern, Inputs, Queries, etc. Mit dem neuen Angular Update sollen asynchrone Operationen in Signals integriert werden. Der erste Schritt in diese Richtung wird mit der Resource API getestet. Eine Resource ist eine asynchrone Dependency, die mit Signals integriert wird. Man kann sich eine Resource so vorstellen, dass sie aus drei Teilen besteht:<\/p>\n

    \n
  1. Eine params<\/code> Funktion, welche die Abh\u00e4ngigkeit der Resource von einem oder mehreren Signals definiert. Hier l\u00e4dt die Resource automatisch neu wenn sich this.page()<\/code> \u00e4ndert\n
    params: () => this.page(),  \/\/ Signal-basierte Anfrage (hier: Paginierung)<\/pre>\n<\/li>\n
  2. Ein loader\/stream<\/code> der eine asynchrone Operation durchf\u00fchrt, wenn sich die Anfrage \u00e4ndert, und einen neuen Wert zur\u00fcckgibt. Zusammen mit der Params-Funktion werden hier also jedesmal neu die Produktdaten aufgerufen, wenn sich die Seitenzahl \u00e4ndert.\n
    loader: ({ params: page }) => \r\n  fetch(`https:\/\/dummyjson.com\/products?limit=10&skip=${(page - 1) * 10}`)\r\n    .then((res) => {\r\n      return res.json();  \/\/ Gibt Produktdaten zur\u00fcck\r\n    }),<\/pre>\n<\/li>\n
  3. Die resultierende Instanz der Resource, die selber verschiedene Signals bereitstellt, enth\u00e4lt den Wert und den Status der Resource. Der Wert wird dabei asynchron mitgeteilt, also erst sobald dieser verf\u00fcgbar ist. Der Status einer Resource kann loading<\/code>, resolved<\/code>, errored<\/code>, … sein.\n
    products = resource({ ... });  \/\/ Resource-Instanz<\/pre>\n<\/li>\n<\/ol>\n
    Das komplette Beispiel kannst du unten in unserem StackBlitz Projekt ausprobieren. Mehr zur Resource API kannst du auch in der offiziellen Angular Dokumentation<\/a> finden.<\/p>\n
    resource() vs rxResource() vs httpResource()<\/h2>\n
    Die Resource API bietet drei Methoden an. Die drei Methoden haben eine \u00e4hnliche Funktionsweise aber unterschiedliche Anwendungsf\u00e4lle.<\/p>\n
    resource()<\/code><\/a> ist die “Basic” Variante der drei Methoden und arbeitet mit Promises. Du solltest diese Methode benutzen, wenn du Javascript fetch<\/code> bevorzugst um Daten abzurufen.<\/p>\n
    rxResource()<\/a><\/code> ist die “Reactive” Variante. Sie benutzt Oberservables. Du solltest diese Methode benutzen, wenn du bereits mit RxJS<\/a> arbeitest oder RxJS bevorzugst. Du kannst sie auch verwenden, wenn du das Ergebnis durch Oberservable Operators pipen willst. Da der HttpClient<\/code> von Angular Observable-basiert ist, bietet sich hier die rxResource()<\/code> an.<\/p>\n
    httpResource()<\/a><\/code> ist die einfachste und flexibelste Variante. Mit einfacher Syntax kann man eine HTTP Request mit URL und optionalen Parameter stellen und sogar ein Request-Objekt definieren. \u00dcber httpResource()<\/code> soll es auch im zweiten Teil dieses Artikels nochmal genauer gehen.<\/p>\n
    \n<\/picture> \"Angular<\/picture> <\/a><\/p>\n
    Welches Problem l\u00f6st die Resource API?<\/h2>\n
    Bisher mussten asynchrone Daten (z.B. HTTP-Requests) in Angular \u00fcber RxJS Observables<\/a> verarbeitet werden \u2013 inklusive manuellem subscribe und unsubscribe. F\u00fcr die UI-Aktualisierung war dabei zone.js<\/code> verantwortlich, was bei komplexen Apps oft zu Performance-Problemen f\u00fchrte.<\/p>\n
    Mit Signals wurde die reaktive Zustandsverwaltung deutlich effizienter, aber es fehlte eine elegante M\u00f6glichkeit, asynchrone Operationen, wie API-Calls, direkt in Signals zu integrieren. Entwickler mussten Workarounds wie toSignals()<\/code> oder manuelle Promises nutzen, was umst\u00e4ndlich und fehleranf\u00e4llig war.<\/p>\n
    Die Resource-API schlie\u00dft die L\u00fccke, indem sie asynchrone Daten direkt als Signals bereitstellt – ohne subscribe und zone.js<\/code>:<\/p>\n
    \/\/ Beispiel: API-Request als Signal\r\nproducts = resource({\r\n  params: () => this.page(),\r\n  loader: ({ params: page }) => fetch(`\/api\/products?page=${page}`)\r\n});<\/pre>\n
    Au\u00dferdem erm\u00f6glicht die Resource API auch abbrechbare Anfragen – besonders n\u00fctzlich bei GET-Requests. Wenn ein Nutzer schnell zwischen Seiten wechselt, werden veraltete Requests automatisch abgebrochen.<\/p>\n
    Die Resource API ist n\u00fctzlich wenn Du asynchrone Daten empfangen willst. Sie hilft dabei, die Daten direkt in ein Signal umzuwandeln, damit Du sofort damit arbeiten kannst ohne einen gro\u00dfen Workaround. Au\u00dferdem erlaubt Resource das Unterbrechen von Requests. Resource erlaubt ein abortSignal<\/code>, womit man Requests schnell unterbrechen kann und stattdessen eine andere Request bearbeiten kann. Sollte der Nutzer also aus irgendwelchen Gr\u00fcnden mal mehrere Requests schnell hintereinander stellen, indem er beispielsweise schnell auf verschiedene Buttons dr\u00fcckt, dann unterbricht Resource diese Requests und leitet nur die Neuste weiter. Dies macht die Anwendung effizienter. Einer Sache muss man sich hier aber bewusst sein, dadurch, dass man Requests unterbrechen kann, k\u00f6nnten Daten verloren gehen, wenn Resource mit POST-Request Operationen benutzt wird.<\/p>\n
    Deshalb solltest Du Resource nur f\u00fcr GET-Requests benutzen, also um Daten in Signals zu laden. Du solltest Resource nicht f\u00fcr POST-Requests benutzen, um Daten zu senden.<\/p>\n
    Beispiel: resource()<\/h2>\n
    Hier ist ein Teil aus unserem StackBlitz Beispiel. In diesem Beispiel wird die DummyJson Seite gefetched und daraus Daten geladen. Es wird ein Objekt an resource()<\/code> \u00fcbergeben. Das Objekt hat die params<\/code> und loader<\/code> Funktion, wie oben erkl\u00e4rt, und au\u00dferdem auch ein abortSignal<\/code>.<\/p>\n
    loader: ({ params: page, abortSignal }) =>\r\n  fetch(`https:\/\/dummyjson.com\/products?limit=10&skip=${(page - 1) * 10}`, {\r\n     signal: abortSignal,\r\n   })<\/pre>\n
    Das abortSignal<\/code> bricht hier die Request \u00fcber einen AbortController ab, wenn eine neue Seite geladen werden soll, w\u00e4hrend eine andere am laden ist. Das kannst du selber ausprobieren, indem Du den Network-Tab in den Inspector-Tools im StackBlitz-Projekt \u00f6ffnest und dann sehr schnell auf “Next” dr\u00fcckst. Hier siehst Du wie bei Requests der Status “(cancelled)” erscheint. Daf\u00fcr ist das abortSignal<\/code> verantwortlich. Durch das Unterbrechen der Anfragen werden weniger Netzwerk-Ressourcen verwendet, was bei gr\u00f6\u00dferen Websiten ziemlich n\u00fctzlich sein kann.<\/p>\n
    Eine Resource besitz noch weitere Eigenschaften wie value<\/code>, status<\/code>, isLoading<\/code>, error<\/code>, etc. mehr Details zu einer Resource kannst Du hier<\/a> nachschauen. \u00dcber products.value()<\/code> wird in unserem Beispiel der Wert der geholten Json abgefragt.<\/p>\n
    ngIf=\"products.value()?.products as productList<\/pre>\n
    Dadurch wird die Liste gebildet mit der die verschiedenen Werte der Produkte aus DummyJson angezeigt werden.<\/p>\n
    Hier ist der komplette Code zu dem Beispiel von resource()<\/code>. Wie bereits erw\u00e4hnt kannst Du diesen auch wieder im StackBlitz-Projekt bearbeiten und damit experimentieren. In der Dokumentation<\/a> findest du noch mehr Details zum Umgang mit resource()<\/code>.<\/p>\n
    @Component({\r\n  selector: 'app-resource',\r\n  standalone: true,\r\n  imports: [CommonModule],\r\n  template: `\r\n    <button (click)=\"page.set(page() - 1)\" [disabled]=\"page() === 1\">Previous<\/button>\r\n    Page: {{ page() }}\r\n    <button (click)=\"page.set(page() + 1)\">Next<\/button>\r\n    <ul *ngIf=\"products.value()?.products as productList\">\r\n      <li *ngFor=\"let product of productList\">\r\n        {{ product.title }} ({{ product.price }} \u20ac)\r\n      <\/li>\r\n    <\/ul>\r\n  `,\r\n})\r\nexport class ResourceComponent {\r\n  page = signal(1);\r\n\r\n  products = resource({\r\n    params: () => this.page(),\r\n    loader: ({ params: page, abortSignal }) =>\r\n      fetch(`https:\/\/dummyjson.com\/products?limit=10&skip=${(page - 1) * 10}`, {\r\n        signal: abortSignal,\r\n      }).then((res) => {\r\n        if (!res.ok) throw new Error('Failed to fetch');\r\n        return res.json();\r\n      }),\r\n  });\r\n}<\/pre>\n
    Beispiel: rxResource<\/h2>\n
    Dieses rxResource()<\/code> Beispiel ist sehr \u00e4hnlich zu dem Vorherigen. Statt resource()<\/code>\u00a0 wird nun aber rxResource()<\/code> verwendet, was es erlaubt den HttpClient<\/code> ziemlich einfach zu verwenden. Daf\u00fcr wird der HttpClient<\/code> zuerst injected.<\/p>\n
    private http = inject(HttpClient);<\/pre>\n
    Im loader<\/code>, welcher seit Angular v20 f\u00fcr rxResource()<\/code> stream<\/code>\u00a0hei\u00dft, wird nun eine Url aufgerufen und dabei ein Observable zur\u00fcckgegeben.<\/p>\n
    stream: ({ params: page }) => this.http .get<any>( `https:\/\/dummyjson.com\/products?limit=10&skip=${(page - 1) * 10}` )<\/pre>\n
    rxResource()<\/code> subscribed und unsubscribed auf dem Observable automatisch. Auch anders als bei resource()<\/code>: Es wird kein abortSignal<\/code> ben\u00f6tigt, da rxResource()<\/code> auch das Abbrechen von GET-Requests automatisch \u00fcbernimmt. Du kannst das auch wieder testen, indem Du bei dem rxResource()<\/code> Beispiel im StackBlitz-Projekt wieder schnell auf “Next” dr\u00fcckst und im Network-Tab nachschaust was passiert. Auch ohne ein abortSignal<\/code> wird hier f\u00fcr die GET-Requests der Status “(cancelled)” angezeigt.<\/p>\n
    Da wir RxJs verwenden, haben wir mit rxResource()<\/code> au\u00dferdem auch Zugriff auf die pipe()<\/code> Funktion, womit wir die erhaltenen Daten, wie bei RxJS gewohnt, transformieren k\u00f6nnen.<\/p>\n
    Hier ist der komplette Code zum rxResource()<\/code> Teil des StackBlitz-Projekts. Und auch hier nat\u00fcrlich der Link zur Dokumentation<\/a>.<\/p>\n
    @Component({\r\n  selector: 'app-rxresource',\r\n  standalone: true,\r\n  imports: [CommonModule, HttpClientModule],\r\n  template: `\r\n    <button (click)=\"page.set(page() - 1)\" [disabled]=\"page() === 1\">Previous<\/button>\r\n    Page: {{ page() }}\r\n    <button (click)=\"page.set(page() + 1)\">Next<\/button>\r\n\r\n    <ul *ngIf=\"products.value() as productList\">\r\n      <li *ngFor=\"let product of productList\">\r\n        {{ product.title }} ({{ product.price }} \u20ac)\r\n      <\/li>\r\n    <\/ul>\r\n  `,\r\n})\r\nexport class RxResourceComponent {\r\n  private http = inject(HttpClient);\r\n  page = signal(1);\r\n\r\n  products = rxResource({\r\n    params: this.page,\r\n    stream: ({ params: page }) =>\r\n      this.http\r\n        .get<any>(\r\n          `https:\/\/dummyjson.com\/products?limit=10&skip=${(page - 1) * 10}`\r\n        )\r\n        .pipe(\r\n          map((response) => response.products),\r\n          catchError((error) => {\r\n            console.error('API error:', error);\r\n            throw error;\r\n          })\r\n        ),\r\n  });\r\n}<\/pre>\n
    Erfahrung ist der beste Lehrer: Hands-On f\u00fcr die Resource API<\/h2>\n
    Bist Du bereit, die Theorie in die Praxis umzusetzen? In diesem interaktiven StackBlitz-Beispiel befindet sich die vorgestellte Beispielanwendung, die die Grundkonzepte von Resource aufgreift und die vorgestellten Beispiele und Funktionen beinhaltet.<\/p>\n