{"id":3517,"date":"2025-07-21T09:23:43","date_gmt":"2025-07-21T07:23:43","guid":{"rendered":"https:\/\/www.thecodecampus.de\/blog\/?p=3517"},"modified":"2025-10-01T10:17:41","modified_gmt":"2025-10-01T08:17:41","slug":"reactive-apis-in-angular-resource-api-part-1","status":"publish","type":"post","link":"https:\/\/www.thecodecampus.de\/blog\/reactive-apis-in-angular-resource-api-part-1\/","title":{"rendered":"Reactive APIs in Angular Part 1 &#8211; Resource API resource() and rxResource()"},"content":{"rendered":"<p><strong><em>Klicke <a href=\"https:\/\/www.thecodecampus.de\/blog\/reactive-apis-in-angular-resource-api-teil-1\/\">hier<\/a>, f\u00fcr die deutsche Version des Artikels.<\/em><\/strong><\/p>\n<h2>Reactive APIs in Angular 20: Work asynchronously with Signals using the Resource API<\/h2>\n<p>With Angular 19, a reactive API was introduced as a new feature, the Resource API. Although the API is still considered an experimental feature in v20, you can already use it. If you want to know what the Resource API is, what problem it can solve, what you should and shouldn&#8217;t use it for, then you&#8217;ve come to the right place. This article is a part of the <a href=\"https:\/\/www.thecodecampus.de\/blog\/angular-guide-signals-and-hot-topics\/\">Angular Guides<\/a> series, in which we explore many exciting topics relating to Angular. This guide gives you an overview of current topics, starting with: What are signals and what advantages do they bring?<\/p>\n<p>We continue our journey through the signal-based features of Angular with an insight into the new functions of the Resource API. In this first part, we look at the basics of <code>resource()<\/code> and <code>rxResource()<\/code>. In the second part, we will experiment with the new <code>httpResource()<\/code>, which can be used to facilitate HTTP requests and output them directly as a signal.<\/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 the new Resource API?<\/h2>\n<p>So far, signals in Angular have only focused on the synchronous data flow. Saving states, inputs, queries, etc. With the new Angular update, asynchronous operations are to be integrated into Signals. The first step in this direction is being tested with the Resource API. A resource is an asynchronous dependency that is integrated with Signals. You can imagine a resource as consisting of three parts:<\/p>\n<ol>\n<li>A <code>params<\/code> function, which defines the dependency of the resource on one or more signals. Here the resource automatically reloads when <code>this.page()<\/code> changes\n<pre class=\"lang:default decode:true\">params: () =&gt; this.page(),  \/\/ Signal-based request(here: pagination)<\/pre>\n<\/li>\n<li>A <code>loader\/stream<\/code> that performs an asynchronous operation when the request changes and returns a new value. Together with the params function, the product data is therefore called up again each time the page number changes.\n<pre class=\"lang:default decode:true\">loader: ({ params: page }) =&gt; \r\n  fetch(`https:\/\/dummyjson.com\/products?limit=10&amp;skip=${(page - 1) * 10}`)\r\n    .then((res) =&gt; {\r\n      return res.json();  \/\/ Returns product data\r\n    }),<\/pre>\n<\/li>\n<li>The resulting instance of the resource, which itself provides various signals, contains the value and the status of the resource. The value is communicated asynchronously, i.e. only as soon as it is available. The status of a resource can be <code>loading<\/code>, <code>resolved<\/code>, <code>errored<\/code>, or more.\n<pre class=\"lang:default decode:true\">products = resource({ ... });  \/\/ Resource-Instance<\/pre>\n<\/li>\n<\/ol>\n<p>You can try out the complete example in our StackBlitz project below. You can also find out more about the Resource API in <a href=\"https:\/\/angular.dev\/guide\/signals\/resource\">the official Angular documentation<\/a>.<\/p>\n<h2>resource() vs rxResource() vs httpResource()<\/h2>\n<p>The Resource API offers three methods. The three methods work in a similar way but have different use cases.<\/p>\n<p><code><a href=\"https:\/\/angular.dev\/guide\/signals\/resource\">resource()<\/a><\/code> is the \u201cbasic\u201d variant of the three methods and works with promises. You should use this method if you prefer Javascript <code>fetch<\/code> to retrieve data.<\/p>\n<p><a href=\"https:\/\/angular.dev\/api\/core\/rxjs-interop\/rxResource\"><code>rxResource()<\/code><\/a> is the \u201creactive\u201d variant. It uses upper servables. You should use this method if you already work with <a href=\"https:\/\/rxjs.dev\/guide\/overview\">RxJS<\/a> or prefer RxJS. You can also use it if you want to pipe the result through upper servable operators. Since Angular&#8217;s <code>HttpClient<\/code> is observable-based, <code>rxResource()<\/code> is a good choice here.<\/p>\n<p><code><a href=\"https:\/\/angular.dev\/guide\/http\/http-resource\">httpResource()<\/a><\/code> is the simplest and most flexible variant. With simple syntax, you can make an HTTP request with URL and optional parameters and even define a request object. The second part of this article will also deal with <code>httpResource()<\/code> in more detail.<\/p>\n<h2>What problem does the Resource API solve?<\/h2>\n<p>Previously, asynchronous data (e.g. HTTP requests) had to be processed in Angular via <a href=\"https:\/\/rxjs.dev\/guide\/observable\">RxJS observables<\/a> &#8211; including manual subscribe and unsubscribe. <code>Zone.js<\/code> was responsible for updating the UI, which often led to performance problems with complex apps.<\/p>\n<p>Signals made reactive state management much more efficient, but it lacked an elegant way to integrate asynchronous operations, such as API calls, directly into Signals. Developers had to use workarounds such as <code>toSignals()<\/code> or manual promises, which was cumbersome and error-prone.<\/p>\n<p>The Resource API closes the gap by providing asynchronous data directly as signals &#8211; without subscribe and <code>zone.js<\/code>:<\/p>\n<pre class=\"lang:default decode:true\">\/\/ Example: API-Request as Signal\r\nproducts = resource({\r\n  params: () =&gt; this.page(),\r\n  loader: ({ params: page }) =&gt; fetch(`\/api\/products?page=${page}`)\r\n});<\/pre>\n<p>The Resource API also enables abortable requests &#8211; particularly useful for GET requests. If a user switches quickly between pages, outdated requests are automatically canceled.<\/p>\n<p>The Resource API is useful if you want to receive asynchronous data. It helps to convert the data directly into a signal so that you can work with it immediately without a major workaround. Resource also allows you to interrupt requests. Resource allows an <code>abortSignal<\/code>, with which you can quickly interrupt requests and process another request instead. If, for any reason, the user makes several requests in quick succession, for example by quickly pressing different buttons, Resource interrupts these requests and only forwards the most recent one. This makes the application more efficient. However, there is one thing to be aware of here: the fact that requests can be interrupted means that data could be lost if Resource is used with POST request operations.<\/p>\n<p>You should therefore only use Resource for GET requests, i.e. to load data into Signals. You should not use Resource for POST requests to send data.<\/p>\n<h2>Example: resource()<\/h2>\n<p>Here is a part of our StackBlitz example. In this example, the DummyJson page is fetched and data is loaded from it. An object is passed to <code>resource()<\/code>. The object has the <code>params<\/code> and <code>loader<\/code> function, as explained above, and also an <code>abortSignal<\/code>.<\/p>\n<pre class=\"lang:default decode:true\">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   })<\/pre>\n<p>The<code>abortSignal<\/code> aborts the request via an AbortController if a new page is to be loaded while another is loading. You can try this out yourself by opening the Network tab in the Inspector tools in the StackBlitz project and then pressing \u201cNext\u201d very quickly. Here you can see how the status \u201c(canceled)\u201d appears for requests. The <code>abortSignal<\/code> is responsible for this. By interrupting the requests, fewer network resources are used, which can be quite useful for larger websites.<\/p>\n<p>A resource also has other properties such as <code>value<\/code>, <code>status<\/code>, <code>isLoading<\/code>, <code>error<\/code>, etc. you can find more details <a href=\"https:\/\/angular.dev\/api\/core\/Resource\">here<\/a>. In our example, the value of the retrieved json is queried via <code>products.value()<\/code>.<\/p>\n<pre class=\"lang:default decode:true\">ngIf=\"products.value()?.products as productList<\/pre>\n<p>This creates the list with which the various values of the products from DummyJson are displayed.<\/p>\n<p>Here is the complete code for the <code>resource()<\/code> example. As already mentioned, you can also edit and experiment with this in the StackBlitz project. You can find more details on how to use <code>resource()<\/code> in the <a href=\"https:\/\/angular.dev\/guide\/signals\/resource\">documentation<\/a>.<\/p>\n<pre class=\"lang:default decode:true\">@Component({\r\n  selector: 'app-resource',\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 ResourceComponent {\r\n  page = signal(1);\r\n\r\n  products = 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  });\r\n}<\/pre>\n<h2>Example: rxResource<\/h2>\n<p>This <code>rxResource()<\/code> example is very similar to the previous one. Instead of <code>resource()<\/code>, <code>rxResource()<\/code> is now used, which allows the <code>HttpClient<\/code> to be used quite easily. To do this, the <code>HttpClient<\/code> is injected first.<\/p>\n<pre class=\"lang:default decode:true\">private http = inject(HttpClient);<\/pre>\n<p>In the <code>loader<\/code>, which is called <code>stream<\/code> for <code>rxResource()<\/code> since Angular v20, a url is now called and an observable is returned.<\/p>\n<pre class=\"lang:default decode:true\">stream: ({ params: page }) =&gt; this.http .get&lt;any&gt;( `https:\/\/dummyjson.com\/products?limit=10&amp;skip=${(page - 1) * 10}` )<\/pre>\n<p><code>rxResource()<\/code> subscribed and unsubscribes the observable automatically. Also different from <code>resource()<\/code>: No <code>abortSignal<\/code> is required, as <code>rxResource()<\/code> also automatically aborts GET requests. You can also test this again by quickly pressing \u201cNext\u201d in the <code>rxResource()<\/code> example in the StackBlitz project and checking what happens in the Network tab. Even without an <code>abortSignal<\/code>, the status \u201c(canceled)\u201d is displayed here for the GET requests.<\/p>\n<p>Since we are using RxJs, we also have access to the <code>pipe()<\/code> function with <code>rxResource()<\/code>, which allows us to transform the received data as usual with RxJS.<\/p>\n<p>Here is the complete code for the <code>rxResource()<\/code> part of the StackBlitz-project. And here too, of course, is the link to the <a href=\"https:\/\/angular.dev\/api\/core\/rxjs-interop\/rxResource\">documentation<\/a>.<\/p>\n<pre class=\"lang:default decode:true\">@Component({\r\n  selector: 'app-rxresource',\r\n  standalone: true,\r\n  imports: [CommonModule, HttpClientModule],\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\r\n    &lt;ul *ngIf=\"products.value() 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 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 }) =&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  });\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? This interactive StackBlitz example contains the sample application presented, which takes up the basic concepts of Resource and contains the examples and functions presented.<\/p>\n<p><iframe height=\"400\" style=\"width: 100%;\" src=\"https:\/\/stackblitz.com\/edit\/stackblitz-starters-dtuw9plw?embed=1&amp;file=src%2FresourceAPI%2Fresource.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>What now?<\/h2>\n<p>As already announced, <a href=\"https:\/\/www.thecodecampus.de\/blog\/reactive-apis-in-angular-resource-api-part-2\/\">part 2<\/a> will focus on <code>httpResource()<\/code>. We will show you the differences to <code>resource()<\/code> and <code>rxResource()<\/code> and how you can make the best use of <code>httpResource()<\/code>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>With Angular 19, a reactive API was introduced as a new feature, the Resource API. So far, signals in Angular have only focused on the synchronous data flow. Saving states, inputs, queries, etc. With the new Angular update, asynchronous operations are to be integrated into Signals. The first step [&#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-3517","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.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Reactive APIs in Angular - Resource API resource() &amp; rxResource()<\/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-1\/\" \/>\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 resource() &amp; rxResource()\" \/>\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-1\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Development tips and tricks - theCodeCampus Blog\" \/>\n<meta property=\"article:published_time\" content=\"2025-07-21T07:23:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-01T08:17:41+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=\"6 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-1\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/reactive-apis-in-angular-resource-api-part-1\\\/\"},\"author\":{\"name\":\"Marc Dommr\u00f6se\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#\\\/schema\\\/person\\\/be8c4fcd8229783d0e9442dad8764770\"},\"headline\":\"Reactive APIs in Angular Part 1 &#8211; Resource API resource() and rxResource()\",\"datePublished\":\"2025-07-21T07:23:43+00:00\",\"dateModified\":\"2025-10-01T08:17:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/reactive-apis-in-angular-resource-api-part-1\\\/\"},\"wordCount\":1254,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/reactive-apis-in-angular-resource-api-part-1\\\/#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-1\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/reactive-apis-in-angular-resource-api-part-1\\\/\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/reactive-apis-in-angular-resource-api-part-1\\\/\",\"name\":\"Reactive APIs in Angular - Resource API resource() & rxResource()\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/reactive-apis-in-angular-resource-api-part-1\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/reactive-apis-in-angular-resource-api-part-1\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/10\\\/angular-resource-api.png\",\"datePublished\":\"2025-07-21T07:23:43+00:00\",\"dateModified\":\"2025-10-01T08:17:41+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-1\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/reactive-apis-in-angular-resource-api-part-1\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/reactive-apis-in-angular-resource-api-part-1\\\/#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-1\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Reactive APIs in Angular Part 1 &#8211; Resource API resource() and rxResource()\"}]},{\"@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 resource() & rxResource()","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-1\/","og_locale":"en_US","og_type":"article","og_title":"Reactive APIs in Angular - Resource API resource() & rxResource()","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-1\/","og_site_name":"Web Development tips and tricks - theCodeCampus Blog","article_published_time":"2025-07-21T07:23:43+00:00","article_modified_time":"2025-10-01T08:17:41+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":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.thecodecampus.de\/blog\/reactive-apis-in-angular-resource-api-part-1\/#article","isPartOf":{"@id":"https:\/\/www.thecodecampus.de\/blog\/reactive-apis-in-angular-resource-api-part-1\/"},"author":{"name":"Marc Dommr\u00f6se","@id":"https:\/\/www.thecodecampus.de\/blog\/#\/schema\/person\/be8c4fcd8229783d0e9442dad8764770"},"headline":"Reactive APIs in Angular Part 1 &#8211; Resource API resource() and rxResource()","datePublished":"2025-07-21T07:23:43+00:00","dateModified":"2025-10-01T08:17:41+00:00","mainEntityOfPage":{"@id":"https:\/\/www.thecodecampus.de\/blog\/reactive-apis-in-angular-resource-api-part-1\/"},"wordCount":1254,"commentCount":0,"publisher":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#organization"},"image":{"@id":"https:\/\/www.thecodecampus.de\/blog\/reactive-apis-in-angular-resource-api-part-1\/#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-1\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.thecodecampus.de\/blog\/reactive-apis-in-angular-resource-api-part-1\/","url":"https:\/\/www.thecodecampus.de\/blog\/reactive-apis-in-angular-resource-api-part-1\/","name":"Reactive APIs in Angular - Resource API resource() & rxResource()","isPartOf":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.thecodecampus.de\/blog\/reactive-apis-in-angular-resource-api-part-1\/#primaryimage"},"image":{"@id":"https:\/\/www.thecodecampus.de\/blog\/reactive-apis-in-angular-resource-api-part-1\/#primaryimage"},"thumbnailUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/10\/angular-resource-api.png","datePublished":"2025-07-21T07:23:43+00:00","dateModified":"2025-10-01T08:17:41+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-1\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.thecodecampus.de\/blog\/reactive-apis-in-angular-resource-api-part-1\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.thecodecampus.de\/blog\/reactive-apis-in-angular-resource-api-part-1\/#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-1\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.thecodecampus.de\/blog\/"},{"@type":"ListItem","position":2,"name":"Reactive APIs in Angular Part 1 &#8211; Resource API resource() and rxResource()"}]},{"@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\/3517","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=3517"}],"version-history":[{"count":8,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts\/3517\/revisions"}],"predecessor-version":[{"id":3563,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts\/3517\/revisions\/3563"}],"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=3517"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/categories?post=3517"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/tags?post=3517"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}