{"id":3535,"date":"2025-08-19T15:05:42","date_gmt":"2025-08-19T13:05:42","guid":{"rendered":"https:\/\/www.thecodecampus.de\/blog\/?p=3535"},"modified":"2026-04-09T13:49:14","modified_gmt":"2026-04-09T11:49:14","slug":"reactive-apis-in-angular-resource-api-teil-2","status":"publish","type":"post","link":"https:\/\/www.thecodecampus.de\/blog\/reactive-apis-in-angular-resource-api-teil-2\/","title":{"rendered":"Reactive APIs in Angular Teil 2 &#8211; Resource API httpResource()"},"content":{"rendered":"<p><em><strong><a href=\"https:\/\/www.thecodecampus.de\/blog\/reactive-apis-in-angular-resource-api-part-2\/\">Click here<\/a> for the english version of this blog post.<\/strong><\/em><\/p>\n<h2>Reactive APIs in Angular 20: HTTP-Anfragen mit httpResource()<\/h2>\n<p>Die Resource API erm\u00f6glicht es, die Ergebnisse asynchroner Vorg\u00e4nge als Signals bereitzustellen. In den meisten Anwendungen rufen Entwickler Daten \u00fcber HTTP-Anfragen ab. Um diesen wichtigen Anwendungsfall zu vereinfachen, gibt es die Funktion <code>httpResource()<\/code>, die wir uns in diesem Artikel genauer ansehen werden. Dies ist der zweite Teil unserer Reihe \u00fcber die Resource API. <a href=\"https:\/\/www.thecodecampus.de\/blog\/reactive-apis-in-angular-resource-api-teil-1\/\">Im ersten Teil<\/a> haben wir die API allgemein und speziell die Funktionen <code>resource()<\/code> und <code>rxResource()<\/code> behandelt.<\/p>\n<h2>Wozu gibt es httpResource()?<\/h2>\n<p>Wie die anderen Resource-Methoden schlie\u00dft auch <code>httpResource()<\/code> die L\u00fccke zwischen synchronen Signals und asynchronen Anfragen. Der besondere Vorteil von <code>httpResource()<\/code> ist, dass es speziell daf\u00fcr entwickelt wurde, HTTP-Anfragen zu vereinfachen und deren Ergebnisse als Signal zur\u00fcckzugeben.<\/p>\n<p>Da <code>httpResource()<\/code> auf diesen speziellen Anwendungsfall zugeschnitten ist, ist es deutlich einfacher zu nutzen als <code>resource()<\/code> oder <code>rxResource()<\/code>. Vergleichen wir den notwendigen Code mit den Code-Beispiele aus Teil 1 und dem Stackblitz, um den Unterschied zu verdeutlichen.<\/p>\n<h3>resource()<\/h3>\n<p>Kurzer R\u00fcckblick: F\u00fcr <code>resource()<\/code> ben\u00f6tigen wir<\/p>\n<ul>\n<li>eine <code>params<\/code> Funktion, welche die Abh\u00e4ngigkeit der Resource von einem oder mehreren Signals definiert<\/li>\n<li>ein <code>loader\/stream<\/code> der eine asynchrone Operation durchf\u00fchrt, wenn sich die Anfrage \u00e4ndert, und einen neuen Wert zur\u00fcckgibt<\/li>\n<li>ein <code>abortSignal<\/code> welches den Request abbricht, wenn eine neue Seite geladen werden soll, w\u00e4hrend eine andere am laden ist<\/li>\n<\/ul>\n<pre class=\"lang:default decode:true \">page = signal(1);\r\n\r\nproducts = resource({\r\n  params: () =&gt; this.page(),\r\n  loader: ({ params: page, abortSignal }) =&gt;\r\n    fetch(`https:\/\/dummyjson.com\/products?limit=10&amp;skip=${(page - 1) * 10}`, {\r\n      signal: abortSignal,\r\n    }).then((res) =&gt; {\r\n      if (!res.ok) throw new Error('Failed to fetch');\r\n      return res.json();\r\n    }),\r\n});<\/pre>\n<h3>rxResource()<\/h3>\n<p>Bei <code>rxResource()<\/code> k\u00f6nnen wir den <code>HttpClient<\/code> verwenden und <code>rxResource()<\/code> \u00fcbernimmt f\u00fcr uns das Subscriben an das Observable aus dem <code>stream<\/code>. Au\u00dferdem brauchen wir kein <code>abortSignal<\/code> mehr, da auch das <code>rxResource()<\/code> f\u00fcr uns \u00fcbernimmt.<\/p>\n<pre class=\"lang:default decode:true\">private http = inject(HttpClient);\r\npage = signal(1);\r\n\r\nproducts = rxResource({\r\n  params: this.page,\r\n  stream: ({ params: page }) =&gt;\r\n    this.http\r\n      .get&lt;any&gt;(\r\n        `https:\/\/dummyjson.com\/products?limit=10&amp;skip=${(page - 1) * 10}`\r\n      )\r\n      .pipe(\r\n        map((response) =&gt; response.products),\r\n        catchError((error) =&gt; {\r\n          console.error('API error:', error);\r\n          throw error;\r\n        })\r\n      ),\r\n});<\/pre>\n<h3>httpResource()<\/h3>\n<pre class=\"lang:default decode:true \">page = signal(1);\r\n\r\nproducts = httpResource&lt;ProductsResponse&gt;(\r\n  () =&gt;\r\n    `https:\/\/dummyjson.com\/products?limit=10&amp;skip=${(this.page() - 1) * 10}`\r\n);<\/pre>\n<p>Wie Du siehst, reduziert das <code>httpResource()<\/code>-Beispiel den Boilerplate-Code erheblich und liefert dennoch dasselbe Ergebnis. Die <code>httpResource()<\/code>-Funktion nutzt intern den <code>HttpClient<\/code>, wodurch du alle seine Funktionen verwenden kannst. Du musst den <code>HttpClient<\/code> nicht mehr explizit injizieren (wie bei <code>rxResource()<\/code>) oder eine eigene <code>fetch<\/code>-Logik implementieren (wie bei <code>resource()<\/code>).<\/p>\n<p>Zudem werden Anfragen, die sich wiederholen, automatisch abgebrochen, wenn dieselbe Anfrage w\u00e4hrend der Ladezeit erneut gesendet wird. Damit brauchen wir auch hier kein <code>abortSignal<\/code> mehr und sparen Speicher und verhindern Inkonsistenzen im Anwendungszustand. Standardm\u00e4\u00dfig wird als Antwort JSON direkt geparst und zur Verf\u00fcgung gestellt. Wie im <code>HttpClient<\/code> kann man den R\u00fcckgabe-Typ jedoch anpassen.<\/p>\n<p>Die <code>httpResource()<\/code> bietet zudem die M\u00f6glichkeit komplexere Anfragen mit Request-Objekten zu erstellen. Dabei ist die Syntax \u00e4hnlich wie beim <code>HttpClient<\/code>. Hier ein Beispiel, wie ein entsprechendes Request-Objekt aussehen k\u00f6nnte:<\/p>\n<pre class=\"lang:default decode:true\">products = httpResource&lt;ProductsResponse&gt;(() =&gt; ({\r\n  url: `https:\/\/dummyjson.com\/products`,\r\n  method: 'GET',\r\n  headers: {\r\n    'X-Special': 'true',\r\n  },\r\n  params: {\r\n    limit: '10',\r\n    skip: String((this.page() - 1) * 10),\r\n    fast: 'yes',\r\n  }\r\n}));<\/pre>\n<p>Du kannst hier den Endpoint, HTTP Methode, Custom Headers, Query Parameter und weiteres definieren. Weitere Informationen f\u00fcr komplexere Anfragen findest Du in der <a href=\"https:\/\/angular.dev\/guide\/http\/http-resource#using-httpresource\">Angular Dokumentation<\/a>.<\/p>\n<p><a style=\"display: inline-block;\" href=\"https:\/\/www.thecodecampus.de\/schulungen\/angular\">\n<picture><source srcset=\"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/04\/schulungen-tcc_frieder_WP_big.png\" media=\"(min-width: 1024px)\" \/><\/picture> <picture><source srcset=\"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/04\/schulungen-tcc_frieder_WP_medium.png\" media=\"(min-width: 600px)\" \/><\/picture> <picture><img decoding=\"async\" class=\"alignnone size-full wp-image-38\" src=\"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/04\/schulungen-tcc_frieder_WP_small.png\" alt=\"Angular Schulungen\" \/><\/picture> <\/a><\/p>\n<h2>Wann sollte die httpResource() verwendet werden?<\/h2>\n<p>Bestimmt fr\u00e4gst Du dich jetzt, ob man <code>httpResource()<\/code> nicht immer verwenden sollte, wenn es doch so viel effizienter ist. Hier haben wir f\u00fcr Dich zusammengefasst, in welchen Anwendungsf\u00e4llen Du die Resource API ideal nutzt:<\/p>\n<p><code>resource()<\/code><\/p>\n<ul>\n<li>Wenn Du die Javascript <code>fetch<\/code>-Methode verwenden willst<\/li>\n<li>Wenn Du im <code>loader<\/code> mit Promises arbeiten willst<\/li>\n<li>N\u00fctzlich f\u00fcr andere asynchrone Operationen ohne HTTP-Anfragen und Observables<\/li>\n<\/ul>\n<p><code>rxResource()<\/code><\/p>\n<ul>\n<li>Wenn Du im <code>stream<\/code> mit Observables arbeiten willst<\/li>\n<li>Wenn Du RxJs benutzen willst (bspw. f\u00fcr <code>pipe()<\/code>)<\/li>\n<li>Empfehlenswert, wenn du zus\u00e4tzliche Processing-Schritte hast<\/li>\n<\/ul>\n<p><code>httpResource()<\/code><\/p>\n<ul>\n<li>Am einfachsten f\u00fcr HTTP-Anfragen<\/li>\n<li>F\u00fcr komplexere Request-Objekte<\/li>\n<\/ul>\n<p><strong>Wichtiger Hinweis!<\/strong> Allgemein gilt f\u00fcr die Resource API, dass sie nicht f\u00fcr andere Anfragen als GET-Anfragen verwendet werden sollte. Dazu solltest Du besser den <code>HttpClient<\/code> direkt verwenden. Zwar kann man <code>httpResource()<\/code> ab\u00e4ndern um POST-Anfragen zu stellen, aber die Best-Practices empfehlen dies nicht. <a href=\"https:\/\/www.thecodecampus.de\/blog\/reactive-apis-in-angular-resource-api-teil-1\/\">Mehr dazu im ersten Teil<\/a>.<\/p>\n<h2>Beispiel: httpResource()<\/h2>\n<p>Lass uns hier noch einmal genauer auf das Beispiel der <code>httpResource()<\/code> aus dem oberen Vergleich eingehen.<\/p>\n<p>Zun\u00e4chst erstellen wir ein <code>ProductsResponse<\/code> Interface. Zwar ist dieses Interface nicht zwingend notwendig, aber vereinfacht den Umgang mit <code>httpResource()<\/code> etwas, da wir den Typ der Http Antwort direkt definiert haben.<\/p>\n<pre class=\"lang:default decode:true \">interface ProductsResponse {\r\n  products: Array&lt;{\r\n    id: number;\r\n    title: string;\r\n    price: number;\r\n  }&gt;;\r\n  total: number;\r\n  skip: number;\r\n  limit: number;\r\n}<\/pre>\n<p>Jetzt m\u00fcssen wir nur noch die passende URL an <code>httpResource()<\/code> \u00fcbergeben, und schon haben wir praktisch dieselbe Funktionalit\u00e4t wie bei <code>resource()<\/code> und <code>rxResource()<\/code>.<\/p>\n<pre class=\"lang:default decode:true \">page = signal(1);\r\n\r\nproducts = httpResource&lt;ProductsResponse&gt;(\r\n  () =&gt;\r\n    `https:\/\/dummyjson.com\/products?limit=10&amp;skip=${(this.page() - 1) * 10}`\r\n);<\/pre>\n<p>Wenn sich das Signal \u00e4ndert wird erneut ein neuer Request gestellt. <code>httpResource()<\/code> verh\u00e4lt sich somit sehr \u00e4hnlich zu den anderen Resource API Methoden &#8211; bietet jedoch eine optimierte API.<\/p>\n<p>Folgend das komplette Beispiel. Dieses ist nat\u00fcrlich auch Teil von unserem StackBlitz.<\/p>\n<pre class=\"lang:default decode:true\">interface ProductsResponse {\r\n  products: Array&lt;{\r\n    id: number;\r\n    title: string;\r\n    price: number;\r\n  }&gt;;\r\n  total: number;\r\n  skip: number;\r\n  limit: number;\r\n}\r\n\r\n@Component({\r\n  selector: 'app-httpresource',\r\n  standalone: true,\r\n  imports: [CommonModule],\r\n  template: `\r\n    &lt;button (click)=\"page.set(page() - 1)\" [disabled]=\"page() === 1\"&gt;Previous&lt;\/button&gt;\r\n    Page: {{ page() }}\r\n    &lt;button (click)=\"page.set(page() + 1)\"&gt;Next&lt;\/button&gt;\r\n    &lt;ul *ngIf=\"products.value()?.products as productList\"&gt;\r\n      &lt;li *ngFor=\"let product of productList\"&gt;\r\n        {{ product.title }} ({{ product.price }} \u20ac)\r\n      &lt;\/li&gt;\r\n    &lt;\/ul&gt;\r\n  `,\r\n})\r\nexport class HttpResourceComponent {\r\n  page = signal(1);\r\n\r\n  products = httpResource&lt;ProductsResponse&gt;(\r\n    () =&gt;\r\n      `https:\/\/dummyjson.com\/products?limit=10&amp;skip=${(this.page() - 1) * 10}`\r\n  );\r\n}\r\n<\/pre>\n<h2>Erfahrung ist der beste Lehrer: Hands-On f\u00fcr die Resource API<\/h2>\n<p>Bist Du bereit, die Theorie in die Praxis umzusetzen? Das Stackblitz enth\u00e4lt neben unserem Beispiel f\u00fcr die <code>httpResource()<\/code>, auch die Code-Beispiele f\u00fcr <code>resource()<\/code> und <code>rxResource()<\/code>, damit Du alles zur Resource API an einem Ort ausprobieren kannst.<\/p>\n<p><iframe height=\"400\" style=\"width: 100%;\" src=\"https:\/\/stackblitz.com\/edit\/stackblitz-starters-dtuw9plw?embed=1&amp;file=src%2FresourceAPI%2Fhttpresource.component.ts\" scrolling=\"no\"><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><\/iframe><\/p>\n<h2>Mit welchen Themen geht es weiter?<\/h2>\n<p>Die Resource API hilft uns dabei asynchrone Vorg\u00e4nge mit den reactiven Signals zu verkn\u00fcpfen und ist damit sehr n\u00fctzlich, um effizienter und effektiver zu programmieren.<br \/>\nAuch sehr n\u00fctzlich sind <a href=\"https:\/\/www.thecodecampus.de\/blog\/angular-signal-forms-schnell-reactive-formulare\/\">die Signal Forms, um welche sich unser n\u00e4chster Artikel dreht<\/a>. Wenn du wissen willst, wie einfach du mit den Signal Forms reaktive Fornulare bauen kannst, wird mal einen Blick rein. Ansonsten lohnt es sich auch immer einen Blick in unsere <a href=\"https:\/\/www.thecodecampus.de\/blog\/angular-guide-signals-und-hot-topics\/\">Blogreihe zu den Angular Signals<\/a> zu werfen.<\/p>\n<h2 id=\"Termin\u00fcbersicht\">Termin\u00fcbersicht der n\u00e4chsten Angular Schulungen<\/h2>\n<p><iframe height=\"600\" style=\"width: 100%;\" src=\"https:\/\/thecodecampus.de\/kalender\"><\/iframe><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Die Resource API erm\u00f6glicht es, die Ergebnisse asynchroner Vorg\u00e4nge als Signals bereitzustellen. Wie die anderen Resource-Methoden schlie\u00dft auch httpResource() die L\u00fccke zwischen synchronen Signals und asynchronen Anfragen. Der besondere Vorteil von httpResource() ist, dass es speziell daf\u00fcr entwickelt wurde, HTTP-Anfragen zu vereinfachen und deren Ergebnisse als Signal zur\u00fcckzugeben. Da httpResource() auf diesen speziellen Anwendungsfall [&#8230;]<\/p>\n","protected":false},"author":40,"featured_media":3568,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[73,185,190,163,168,151,162,183,191,167],"tags":[112,187,192,181,171,37,175,193,182],"class_list":["post-3535","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","category-angular-19","category-angular-20","category-angular-performance-optimization","category-angular-signals","category-optimization","category-performance","category-reactive-programming","category-resource-api","category-signals","tag-angular","tag-angular-19","tag-angular-20","tag-angular-performance-optimization","tag-angular-signals","tag-performance","tag-reactive-programming","tag-resource-api","tag-signals"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Reactive APIs in Angular - Resource API httpResource()<\/title>\n<meta name=\"description\" content=\"Reactive APIs in Angular 20: Arbeite mit der neuen Resource API! Lerne wie du asynchrone Requests mit Angular Signals verbinden kannst!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.thecodecampus.de\/blog\/reactive-apis-in-angular-resource-api-teil-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Reactive APIs in Angular - Resource API httpResource()\" \/>\n<meta property=\"og:description\" content=\"Reactive APIs in Angular 20: Arbeite mit der neuen Resource API! Lerne wie du asynchrone Requests mit Angular Signals verbinden kannst!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.thecodecampus.de\/blog\/reactive-apis-in-angular-resource-api-teil-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Development tips and tricks - theCodeCampus Blog\" \/>\n<meta property=\"article:published_time\" content=\"2025-08-19T13:05:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-09T11:49:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/10\/angular-resource-api.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"1200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Marc Dommr\u00f6se\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Marc Dommr\u00f6se\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/reactive-apis-in-angular-resource-api-teil-2\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/reactive-apis-in-angular-resource-api-teil-2\\\/\"},\"author\":{\"name\":\"Marc Dommr\u00f6se\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#\\\/schema\\\/person\\\/be8c4fcd8229783d0e9442dad8764770\"},\"headline\":\"Reactive APIs in Angular Teil 2 &#8211; Resource API httpResource()\",\"datePublished\":\"2025-08-19T13:05:42+00:00\",\"dateModified\":\"2026-04-09T11:49:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/reactive-apis-in-angular-resource-api-teil-2\\\/\"},\"wordCount\":811,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/reactive-apis-in-angular-resource-api-teil-2\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/10\\\/angular-resource-api.png\",\"keywords\":[\"Angular\",\"Angular 19\",\"Angular 20\",\"Angular Performance Optimization\",\"Angular Signals\",\"Performance\",\"Reactive Programming\",\"Resource API\",\"Signals\"],\"articleSection\":[\"Angular\",\"Angular 19\",\"Angular 20\",\"Angular Performance Optimization\",\"Angular Signals\",\"Optimization\",\"Performance\",\"Reactive Programming\",\"Resource API\",\"Signals\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/reactive-apis-in-angular-resource-api-teil-2\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/reactive-apis-in-angular-resource-api-teil-2\\\/\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/reactive-apis-in-angular-resource-api-teil-2\\\/\",\"name\":\"Reactive APIs in Angular - Resource API httpResource()\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/reactive-apis-in-angular-resource-api-teil-2\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/reactive-apis-in-angular-resource-api-teil-2\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/10\\\/angular-resource-api.png\",\"datePublished\":\"2025-08-19T13:05:42+00:00\",\"dateModified\":\"2026-04-09T11:49:14+00:00\",\"description\":\"Reactive APIs in Angular 20: Arbeite mit der neuen Resource API! Lerne wie du asynchrone Requests mit Angular Signals verbinden kannst!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/reactive-apis-in-angular-resource-api-teil-2\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/reactive-apis-in-angular-resource-api-teil-2\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/reactive-apis-in-angular-resource-api-teil-2\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/10\\\/angular-resource-api.png\",\"contentUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/10\\\/angular-resource-api.png\",\"width\":1200,\"height\":1200,\"caption\":\"Angular - Resource API\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/reactive-apis-in-angular-resource-api-teil-2\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Reactive APIs in Angular Teil 2 &#8211; Resource API httpResource()\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/\",\"name\":\"Web Development tips and tricks - theCodeCampus Blog\",\"description\":\"Tips, tricks, and experiences about developing web and mobile applications with Angular, TypeScript, and Testing.\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#organization\",\"name\":\"theCodeCampus\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/TCC-Logo-Bildmarke-quadratisch.jpg\",\"contentUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/TCC-Logo-Bildmarke-quadratisch.jpg\",\"width\":156,\"height\":156,\"caption\":\"theCodeCampus\"},\"image\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#\\\/schema\\\/person\\\/be8c4fcd8229783d0e9442dad8764770\",\"name\":\"Marc Dommr\u00f6se\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/cropped-marc-dommroese-tcc-author-96x96.png\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/cropped-marc-dommroese-tcc-author-96x96.png\",\"contentUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/cropped-marc-dommroese-tcc-author-96x96.png\",\"caption\":\"Marc Dommr\u00f6se\"},\"description\":\"My name is Marc. I'm currently studying Computer Science at university, with one of my favorite topics being frontend development.\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/in\\\/marc-dommr\u00f6se-372a88318\\\/\"],\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/author\\\/mdommroese\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Reactive APIs in Angular - Resource API httpResource()","description":"Reactive APIs in Angular 20: Arbeite mit der neuen Resource API! Lerne wie du asynchrone Requests mit Angular Signals verbinden kannst!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.thecodecampus.de\/blog\/reactive-apis-in-angular-resource-api-teil-2\/","og_locale":"en_US","og_type":"article","og_title":"Reactive APIs in Angular - Resource API httpResource()","og_description":"Reactive APIs in Angular 20: Arbeite mit der neuen Resource API! Lerne wie du asynchrone Requests mit Angular Signals verbinden kannst!","og_url":"https:\/\/www.thecodecampus.de\/blog\/reactive-apis-in-angular-resource-api-teil-2\/","og_site_name":"Web Development tips and tricks - theCodeCampus Blog","article_published_time":"2025-08-19T13:05:42+00:00","article_modified_time":"2026-04-09T11:49:14+00:00","og_image":[{"width":1200,"height":1200,"url":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/10\/angular-resource-api.png","type":"image\/png"}],"author":"Marc Dommr\u00f6se","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Marc Dommr\u00f6se","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.thecodecampus.de\/blog\/reactive-apis-in-angular-resource-api-teil-2\/#article","isPartOf":{"@id":"https:\/\/www.thecodecampus.de\/blog\/reactive-apis-in-angular-resource-api-teil-2\/"},"author":{"name":"Marc Dommr\u00f6se","@id":"https:\/\/www.thecodecampus.de\/blog\/#\/schema\/person\/be8c4fcd8229783d0e9442dad8764770"},"headline":"Reactive APIs in Angular Teil 2 &#8211; Resource API httpResource()","datePublished":"2025-08-19T13:05:42+00:00","dateModified":"2026-04-09T11:49:14+00:00","mainEntityOfPage":{"@id":"https:\/\/www.thecodecampus.de\/blog\/reactive-apis-in-angular-resource-api-teil-2\/"},"wordCount":811,"commentCount":0,"publisher":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#organization"},"image":{"@id":"https:\/\/www.thecodecampus.de\/blog\/reactive-apis-in-angular-resource-api-teil-2\/#primaryimage"},"thumbnailUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/10\/angular-resource-api.png","keywords":["Angular","Angular 19","Angular 20","Angular Performance Optimization","Angular Signals","Performance","Reactive Programming","Resource API","Signals"],"articleSection":["Angular","Angular 19","Angular 20","Angular Performance Optimization","Angular Signals","Optimization","Performance","Reactive Programming","Resource API","Signals"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.thecodecampus.de\/blog\/reactive-apis-in-angular-resource-api-teil-2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.thecodecampus.de\/blog\/reactive-apis-in-angular-resource-api-teil-2\/","url":"https:\/\/www.thecodecampus.de\/blog\/reactive-apis-in-angular-resource-api-teil-2\/","name":"Reactive APIs in Angular - Resource API httpResource()","isPartOf":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.thecodecampus.de\/blog\/reactive-apis-in-angular-resource-api-teil-2\/#primaryimage"},"image":{"@id":"https:\/\/www.thecodecampus.de\/blog\/reactive-apis-in-angular-resource-api-teil-2\/#primaryimage"},"thumbnailUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/10\/angular-resource-api.png","datePublished":"2025-08-19T13:05:42+00:00","dateModified":"2026-04-09T11:49:14+00:00","description":"Reactive APIs in Angular 20: Arbeite mit der neuen Resource API! Lerne wie du asynchrone Requests mit Angular Signals verbinden kannst!","breadcrumb":{"@id":"https:\/\/www.thecodecampus.de\/blog\/reactive-apis-in-angular-resource-api-teil-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.thecodecampus.de\/blog\/reactive-apis-in-angular-resource-api-teil-2\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.thecodecampus.de\/blog\/reactive-apis-in-angular-resource-api-teil-2\/#primaryimage","url":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/10\/angular-resource-api.png","contentUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/10\/angular-resource-api.png","width":1200,"height":1200,"caption":"Angular - Resource API"},{"@type":"BreadcrumbList","@id":"https:\/\/www.thecodecampus.de\/blog\/reactive-apis-in-angular-resource-api-teil-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.thecodecampus.de\/blog\/"},{"@type":"ListItem","position":2,"name":"Reactive APIs in Angular Teil 2 &#8211; Resource API httpResource()"}]},{"@type":"WebSite","@id":"https:\/\/www.thecodecampus.de\/blog\/#website","url":"https:\/\/www.thecodecampus.de\/blog\/","name":"Web Development tips and tricks - theCodeCampus Blog","description":"Tips, tricks, and experiences about developing web and mobile applications with Angular, TypeScript, and Testing.","publisher":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.thecodecampus.de\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.thecodecampus.de\/blog\/#organization","name":"theCodeCampus","url":"https:\/\/www.thecodecampus.de\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.thecodecampus.de\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/01\/TCC-Logo-Bildmarke-quadratisch.jpg","contentUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/01\/TCC-Logo-Bildmarke-quadratisch.jpg","width":156,"height":156,"caption":"theCodeCampus"},"image":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.thecodecampus.de\/blog\/#\/schema\/person\/be8c4fcd8229783d0e9442dad8764770","name":"Marc Dommr\u00f6se","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/09\/cropped-marc-dommroese-tcc-author-96x96.png","url":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/09\/cropped-marc-dommroese-tcc-author-96x96.png","contentUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/09\/cropped-marc-dommroese-tcc-author-96x96.png","caption":"Marc Dommr\u00f6se"},"description":"My name is Marc. I'm currently studying Computer Science at university, with one of my favorite topics being frontend development.","sameAs":["https:\/\/www.linkedin.com\/in\/marc-dommr\u00f6se-372a88318\/"],"url":"https:\/\/www.thecodecampus.de\/blog\/author\/mdommroese\/"}]}},"_links":{"self":[{"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts\/3535","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/users\/40"}],"replies":[{"embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/comments?post=3535"}],"version-history":[{"count":17,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts\/3535\/revisions"}],"predecessor-version":[{"id":3721,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts\/3535\/revisions\/3721"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/media\/3568"}],"wp:attachment":[{"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/media?parent=3535"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/categories?post=3535"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/tags?post=3535"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}