{"id":3551,"date":"2025-08-19T15:06:18","date_gmt":"2025-08-19T13:06:18","guid":{"rendered":"https:\/\/www.thecodecampus.de\/blog\/?p=3551"},"modified":"2026-04-09T13:50:26","modified_gmt":"2026-04-09T11:50:26","slug":"reactive-apis-in-angular-resource-api-part-2","status":"publish","type":"post","link":"https:\/\/www.thecodecampus.de\/blog\/reactive-apis-in-angular-resource-api-part-2\/","title":{"rendered":"Reactive APIs in Angular Part 2 &#8211; Resource API httpResource()"},"content":{"rendered":"<p><strong><em><a href=\"https:\/\/www.thecodecampus.de\/blog\/reactive-apis-in-angular-resource-api-teil-2\/\">Klicke hier<\/a>, f\u00fcr die deutsche Version des Artikels.<\/em><\/strong><\/p>\n<h2>Reactive APIs in Angular 20: HTTP requests with httpResource()<\/h2>\n<p>The Resource API allows the results of asynchronous operations to be provided as signals. In most applications, developers retrieve data via HTTP requests. To simplify this important use case, there is the <code>httpResource()<\/code> function, which we will take a closer look at in this article. This is the second part of our series on the Resource API. <a href=\"https:\/\/www.thecodecampus.de\/blog\/reactive-apis-in-angular-resource-api-part-1\/\">In the first part<\/a>, we covered the API in general and specifically the <code>resource()<\/code> and <code>rxResource()<\/code> functions.<\/p>\n<p>If you want to learn more about the new Resource API and Angular in detail, visit one of our Angular courses:<\/p>\n<ul>\n<li>Angular Basic Training: <a href=\"https:\/\/www.thecodecampus.de\/schulungen\/angular\">https:\/\/www.thecodecampus.de\/schulungen\/angular<\/a><\/li>\n<li>Advanced Training: <a href=\"https:\/\/www.thecodecampus.de\/schulungen\/angular-advanced\">https:\/\/www.thecodecampus.de\/schulungen\/angular-advanced<\/a><\/li>\n<\/ul>\n<h2>What is httpResource() used for?<\/h2>\n<p>Like the other resource methods, <code>httpResource()<\/code> bridges the gap between synchronous signals and asynchronous requests. The particular advantage of <code>httpResource()<\/code> is that it was specifically designed to simplify HTTP requests and return their results as signals.<\/p>\n<p>Since <code>httpResource()<\/code> is tailored to this specific use case, it is much easier to use than <code>resource()<\/code> or <code>rxResource()<\/code>. Let&#8217;s compare the necessary code with the code examples from Part 1 and from the Stackblitz to illustrate the difference.<\/p>\n<h3>resource()<\/h3>\n<p>Quick recap: For <code>resource()<\/code>, we need<\/p>\n<ul>\n<li>a <code>params<\/code> function that defines the dependency of the resource on one or more signals<\/li>\n<li>a <code>loader\/stream<\/code> that performs an asynchronous operation when the request changes and returns a new value<\/li>\n<li>an <code>abortSignal<\/code> that cancels the request if a new page is to be loaded while another is still loading<\/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>With <code>rxResource()<\/code>, we can use <code>HttpClient<\/code>, and <code>rxResource()<\/code> takes care of subscribing to the observable from the <code>stream<\/code> for us. We also no longer need an <code>abortSignal<\/code>, as <code>rxResource()<\/code> takes care of that for us as well.<\/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>As you can see, the <code>httpResource()<\/code> example significantly reduces boilerplate code while still delivering the same result. The <code>httpResource()<\/code> function internally uses <code>HttpClient<\/code>, allowing you to use all of its functions. You no longer need to explicitly inject <code>HttpClient<\/code> (as with <code>rxResource()<\/code>) or implement your own <code>fetch<\/code> logic (as with <code>resource()<\/code>).<\/p>\n<p>In addition, repeated requests are automatically aborted if the same request is sent again during the loading time. This means that we no longer need an <code>abortSignal<\/code> here either, saving memory and preventing inconsistencies in the application state. By default, JSON is parsed directly and made available as a response. However, as in <code>HttpClient<\/code>, the return type can be customized.<\/p>\n<p>The <code>httpResource()<\/code> also offers the option of creating more complex requests with request objects. The syntax is similar to that of <code>HttpClient<\/code>. Here is an example of what a corresponding request object might look like:<\/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>Here you can define the endpoint, HTTP method, custom headers, query parameters, and more. For more information on more complex requests, see the <a href=\"https:\/\/angular.dev\/guide\/http\/http-resource#using-httpresource\">Angular documentation<\/a>.<\/p>\n<h2>When should httpResource() be used?<\/h2>\n<p>You&#8217;re probably wondering whether you should always use <code>httpResource()<\/code> if it&#8217;s so much more efficient. Here we&#8217;ve summarized the use cases in which the Resource API is ideal for you:<\/p>\n<p><code>resource()<\/code><\/p>\n<ul>\n<li>If you want to use the JavaScript <code>fetch<\/code> method<\/li>\n<li>If you want to work with promises in the <code>loader<\/code><\/li>\n<li>Useful for other asynchronous operations without HTTP requests and observables<\/li>\n<\/ul>\n<p><code>rxResource()<\/code><\/p>\n<ul>\n<li>If you want to work with observables in the <code>stream<\/code><\/li>\n<li>If you want to use RxJs (e.g. for <code>pipe()<\/code>)<\/li>\n<li>Recommended if you have additional processing steps<\/li>\n<\/ul>\n<p><code>httpResource()<\/code><\/p>\n<ul>\n<li>The simplest method for HTTP requests<\/li>\n<li>For more complex request objects<\/li>\n<\/ul>\n<p><strong>Important notice!<\/strong> As a general rule, the Resource API should not be used for requests other than GET requests. It is better to use <code>HttpClient<\/code> directly for this purpose. Although it is possible to modify <code>httpResource()<\/code> to make POST requests, best practices do not recommend this. <a href=\"https:\/\/www.thecodecampus.de\/blog\/reactive-apis-in-angular-resource-api-part-1\/\">More on this in the first part<\/a>.<\/p>\n<h2>Example: httpResource()<\/h2>\n<p>Let&#8217;s take a closer look at the example of <code>httpResource()<\/code> from the previous comparison.<\/p>\n<p>First, we create a <code>ProductsResponse<\/code> interface. Although this interface is not absolutely necessary, it simplifies the use of <code>httpResource()<\/code> somewhat, as we have defined the type of the HTTP response directly.<\/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>Now we just need to pass the appropriate URL to <code>httpResource()<\/code>, and we have practically the same functionality as with <code>resource()<\/code> and <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>When the signal changes, a new request is made. <code>httpResource()<\/code> behaves very similarly to the other Resource API methods, but offers an optimized API.<\/p>\n<p>Here is the complete example. This is, of course, also part of our 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>Experience is the best teacher: Hands-on for the Resource API<\/h2>\n<p>Are you ready to put theory into practice? In addition to our example for <code>httpResource()<\/code>, the Stackblitz also contains code examples for <code>resource()<\/code> and <code>rxResource()<\/code>, so you can try out everything related to the Resource API in one place.<\/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\" data-mce-fragment=\"1\"><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>What are the next topics?<\/h2>\n<p>The Resource API helps us link asynchronous processes with reactive signals, making it very useful for more efficient and effective programming.<br \/>\n<a href=\"https:\/\/www.thecodecampus.de\/blog\/angular-signal-forms-quick-reactive-forms\/\">Signal Forms are also very useful, and they\u2019re the focus of our next article<\/a>. If you want to know how easy it is to build reactive forms with Signal Forms, be sure to check it out. Otherwise, it\u2019s always worth taking a look at our <a href=\"https:\/\/www.thecodecampus.de\/blog\/angular-guide-signals-and-hot-topics\/\">blog series on Angular Signals<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Resource API allows the results of asynchronous operations to be provided as signals. Like the other resource methods, httpResource() bridges the gap between synchronous signals and asynchronous requests. The particular advantage of httpResource() is that it was specifically designed to [&#8230;]<\/p>\n","protected":false},"author":32,"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-3551","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: Work with the new Resource API! Learn how to connect asynchronous requests with Angular Signals!\" \/>\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-part-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: Work with the new Resource API! Learn how to connect asynchronous requests with Angular Signals!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.thecodecampus.de\/blog\/reactive-apis-in-angular-resource-api-part-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:06:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-09T11:50:26+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=\"Anne Naumann\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Anne Naumann\" \/>\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-part-2\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/reactive-apis-in-angular-resource-api-part-2\\\/\"},\"author\":{\"name\":\"Anne Naumann\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#\\\/schema\\\/person\\\/d5533850d6a4d364e194500c24c0021a\"},\"headline\":\"Reactive APIs in Angular Part 2 &#8211; Resource API httpResource()\",\"datePublished\":\"2025-08-19T13:06:18+00:00\",\"dateModified\":\"2026-04-09T11:50:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/reactive-apis-in-angular-resource-api-part-2\\\/\"},\"wordCount\":833,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/reactive-apis-in-angular-resource-api-part-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-part-2\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/reactive-apis-in-angular-resource-api-part-2\\\/\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/reactive-apis-in-angular-resource-api-part-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-part-2\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/reactive-apis-in-angular-resource-api-part-2\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/10\\\/angular-resource-api.png\",\"datePublished\":\"2025-08-19T13:06:18+00:00\",\"dateModified\":\"2026-04-09T11:50:26+00:00\",\"description\":\"Reactive APIs in Angular 20: Work with the new Resource API! Learn how to connect asynchronous requests with Angular Signals!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/reactive-apis-in-angular-resource-api-part-2\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/reactive-apis-in-angular-resource-api-part-2\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/reactive-apis-in-angular-resource-api-part-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-part-2\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Reactive APIs in Angular Part 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\\\/d5533850d6a4d364e194500c24c0021a\",\"name\":\"Anne Naumann\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/anne-naumann-tcc-author-96x96.webp\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/anne-naumann-tcc-author-96x96.webp\",\"contentUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/anne-naumann-tcc-author-96x96.webp\",\"caption\":\"Anne Naumann\"},\"description\":\"Hi, I'm a web developer with a focus on frontend technologies, especially Angular. I also have a lot of fun when it comes to UI\\\/UX and when I need to make room for new books on my bookshelves.\",\"sameAs\":[\"https:\\\/\\\/thecodecampus.de\\\/ueber-uns\\\/trainer\\\/anne-naumann\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/anne-naumann-1ab635307\\\/\"],\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/author\\\/anaumann\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Reactive APIs in Angular - Resource API httpResource()","description":"Reactive APIs in Angular 20: Work with the new Resource API! Learn how to connect asynchronous requests with Angular Signals!","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-part-2\/","og_locale":"en_US","og_type":"article","og_title":"Reactive APIs in Angular - Resource API httpResource()","og_description":"Reactive APIs in Angular 20: Work with the new Resource API! Learn how to connect asynchronous requests with Angular Signals!","og_url":"https:\/\/www.thecodecampus.de\/blog\/reactive-apis-in-angular-resource-api-part-2\/","og_site_name":"Web Development tips and tricks - theCodeCampus Blog","article_published_time":"2025-08-19T13:06:18+00:00","article_modified_time":"2026-04-09T11:50:26+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":"Anne Naumann","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Anne Naumann","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-part-2\/#article","isPartOf":{"@id":"https:\/\/www.thecodecampus.de\/blog\/reactive-apis-in-angular-resource-api-part-2\/"},"author":{"name":"Anne Naumann","@id":"https:\/\/www.thecodecampus.de\/blog\/#\/schema\/person\/d5533850d6a4d364e194500c24c0021a"},"headline":"Reactive APIs in Angular Part 2 &#8211; Resource API httpResource()","datePublished":"2025-08-19T13:06:18+00:00","dateModified":"2026-04-09T11:50:26+00:00","mainEntityOfPage":{"@id":"https:\/\/www.thecodecampus.de\/blog\/reactive-apis-in-angular-resource-api-part-2\/"},"wordCount":833,"commentCount":0,"publisher":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#organization"},"image":{"@id":"https:\/\/www.thecodecampus.de\/blog\/reactive-apis-in-angular-resource-api-part-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-part-2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.thecodecampus.de\/blog\/reactive-apis-in-angular-resource-api-part-2\/","url":"https:\/\/www.thecodecampus.de\/blog\/reactive-apis-in-angular-resource-api-part-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-part-2\/#primaryimage"},"image":{"@id":"https:\/\/www.thecodecampus.de\/blog\/reactive-apis-in-angular-resource-api-part-2\/#primaryimage"},"thumbnailUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/10\/angular-resource-api.png","datePublished":"2025-08-19T13:06:18+00:00","dateModified":"2026-04-09T11:50:26+00:00","description":"Reactive APIs in Angular 20: Work with the new Resource API! Learn how to connect asynchronous requests with Angular Signals!","breadcrumb":{"@id":"https:\/\/www.thecodecampus.de\/blog\/reactive-apis-in-angular-resource-api-part-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.thecodecampus.de\/blog\/reactive-apis-in-angular-resource-api-part-2\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.thecodecampus.de\/blog\/reactive-apis-in-angular-resource-api-part-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-part-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.thecodecampus.de\/blog\/"},{"@type":"ListItem","position":2,"name":"Reactive APIs in Angular Part 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\/d5533850d6a4d364e194500c24c0021a","name":"Anne Naumann","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/11\/anne-naumann-tcc-author-96x96.webp","url":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/11\/anne-naumann-tcc-author-96x96.webp","contentUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/11\/anne-naumann-tcc-author-96x96.webp","caption":"Anne Naumann"},"description":"Hi, I'm a web developer with a focus on frontend technologies, especially Angular. I also have a lot of fun when it comes to UI\/UX and when I need to make room for new books on my bookshelves.","sameAs":["https:\/\/thecodecampus.de\/ueber-uns\/trainer\/anne-naumann","https:\/\/www.linkedin.com\/in\/anne-naumann-1ab635307\/"],"url":"https:\/\/www.thecodecampus.de\/blog\/author\/anaumann\/"}]}},"_links":{"self":[{"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts\/3551","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\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/comments?post=3551"}],"version-history":[{"count":8,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts\/3551\/revisions"}],"predecessor-version":[{"id":3723,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts\/3551\/revisions\/3723"}],"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=3551"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/categories?post=3551"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/tags?post=3551"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}