{"id":29406,"date":"2025-03-26T10:58:09","date_gmt":"2025-03-26T09:58:09","guid":{"rendered":"https:\/\/www.angulararchitects.io\/?page_id=29406"},"modified":"2025-05-23T15:41:22","modified_gmt":"2025-05-23T13:41:22","slug":"the-new-httpresource-in-angular","status":"publish","type":"page","link":"https:\/\/www.angulararchitects.io\/en\/the-new-httpresource-in-angular\/","title":{"rendered":"The New httpResource in Angular"},"content":{"rendered":"  \n<div class=\"hero\">\n  <div class=\"hero-ow\">\n    <div class=\"hero-iw\">\n      <div class=\"hero-image-spacer\">\n                <div data-responsive-background-image style=\"\" class=\"hero-image\n            image-position-vertical-desktop-top\n            image-position-horizontal-desktop-right\n            image-position-vertical-tablet-top\n            image-position-horizontal-tablet-right\n            image-position-vertical-mobile-top\n            image-position-horizontal-mobile-right\" fetchPriority=\"high\">\n\n          <img decoding=\"async\" alt=\"\" rel=\"preload\" fetchPriority=\"high\" class=\"responsive-background-image\" src=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/03\/Kein-Titel-640-x-380-px-1200-x-628-px-2000-x-628-px.jpg\" srcset=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/03\/Kein-Titel-640-x-380-px-1200-x-628-px-2000-x-628-px.jpg 2000w, https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/03\/Kein-Titel-640-x-380-px-1200-x-628-px-2000-x-628-px-300x94.jpg 300w, https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/03\/Kein-Titel-640-x-380-px-1200-x-628-px-2000-x-628-px-1024x322.jpg 1024w, https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/03\/Kein-Titel-640-x-380-px-1200-x-628-px-2000-x-628-px-768x241.jpg 768w, https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/03\/Kein-Titel-640-x-380-px-1200-x-628-px-2000-x-628-px-1536x482.jpg 1536w, https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/03\/Kein-Titel-640-x-380-px-1200-x-628-px-2000-x-628-px-600x188.jpg 600w\">\n        <\/div>\n      <\/div>\n      <div class=\"hero-box-spacer\">\n        <div class=\"hero-box-dummy-top\"><\/div>\n        <div class=\"hero-box-wrapper\" style=\"background-color: #cd0f41;\">\n          <div class=\"hero-box\">\n                          <div class=\"hero-hashtag\">#webinar<\/div>\n                                      <h1 class=\"hero-heading\">Webinar: The new httpResource in Angular<\/h1>\n                                      <div class=\"hero-body-text\">Webinar with Manfred Steyer, GDE<\/div>\n                                  <\/div>\n        <\/div>\n      <\/div>\n      <div class=\"hero-box-dummy-bottom-desktop\" style=\"background-color: #cd0f41;\"><\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n  \n\n  \n\n  \n<div class=\"cta-default cta  has-background has-light-red-background-color\"\">\n  <div class=\"cta-default-ow\">\n    <div class=\"cta-default-iw  \">\n      <div class=\"cta-text-content\">\n                \n        \n        <div class=\"cta-text has-text-color has-full-white-color\"><h3>April 2, 2025, 16:00 to 17:30 CEST (Vienna, Berlin, &#8230;)<\/h3>\n<\/div>        \n        <a class=\"button is-style-pink\" href=\"&#x23;register\" target=\"_self\">Register now!<\/a>        \n              <\/div>\n      \n          <\/div>\n  <\/div>\n<\/div>\n\n\n\n<figure class=\"wp-block-image alignfull size-large logo-row\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"145\" src=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/04\/AngularArchitects-Kudennlogos-in-einem-1024x145.png\" alt=\"\" class=\"wp-image-30011\" srcset=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/04\/AngularArchitects-Kudennlogos-in-einem-1024x145.png 1024w, https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/04\/AngularArchitects-Kudennlogos-in-einem-300x43.png 300w, https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/04\/AngularArchitects-Kudennlogos-in-einem-768x109.png 768w, https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/04\/AngularArchitects-Kudennlogos-in-einem-1536x218.png 1536w, https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/04\/AngularArchitects-Kudennlogos-in-einem-2048x290.png 2048w, https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/04\/AngularArchitects-Kudennlogos-in-einem-600x85.png 600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n  \n\n\n<div class=\"image-html-content pe\">\n  <div class=\"image-html-content-ow pe-ow\">\n    <div class=\"image-html-content-iw pe-iw   no-padding-bottom\">\n              <div class=\"image-part \">\n          <img decoding=\"async\" class=\"image\" src=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/08\/manfred-training.png\" srcset=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/08\/manfred-training.png 1080w, https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/08\/manfred-training-300x201.png 300w, https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/08\/manfred-training-1024x686.png 1024w, https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/08\/manfred-training-768x514.png 768w, https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/08\/manfred-training-600x402.png 600w\" alt=\"\" style=\"max-width: px;\"\/>\n        <\/div>\n            <div class=\"html-part\">\n        <p>With the brand-new httpResource, Angular provides us with a way to fetch data within the reactive, Signal-based data flow. In this session, we will explore all the details of this groundbreaking building block.<\/p>\n<p>First, we will migrate an existing data access logic based on HttpClient to httpResource and discuss how it integrates into our architecture and reactive graph. Next, we will explore advanced capabilities, such as tracking progress (reportProgress), integrating schema validation (parse), and working with binary data as well as data formats beyond JSON. In addition to error handling strategies, this session will also highlight the limitations of httpResource.<\/p>\n<p>By the end, you will know how to effectively leverage the new httpResource in your Signal-based Angular applications.<\/p>\n\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n\n  \n\n\n<div class=\"image-html-content pe\">\n  <div class=\"image-html-content-ow pe-ow\">\n    <div class=\"image-html-content-iw pe-iw   no-padding-bottom\">\n            <div class=\"html-part\">\n        <h2>What will I learn?<\/h2>\n<p>\u2705 How does the httpResource complement Angular&#8217;s Signal story?<br \/>\n\u2705 How to use the httpResource for fetching data?<br \/>\n\u2705 Why and when to use the httpResource instead of the HttpClient?<br \/>\n\u2705 How to use advanced features such as progress tracking, and error handling?<br \/>\n\u2705 What are the limitations?<\/p>\n\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n\n  \n\n\n<div class=\"image-html-content pe\">\n  <div class=\"image-html-content-ow pe-ow\">\n    <div class=\"image-html-content-iw pe-iw   \">\n            <div class=\"html-part\">\n        <h2>What do I get?<\/h2>\n<p>\u2611\ufe0f Participation in the webinar<br \/>\n\u2611\ufe0f Opportunity to ask questions<br \/>\n\u2611\ufe0f Recording of the webinar<br \/>\n\u2611\ufe0f All slides and examples<\/p>\n\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n\n  \n<div class=\"cta-newsletter\" style=\"background-color: #cd0f41; color: #FFFFFF;\">\n  <div class=\"cta-newsletter-ow\">\n    <div class=\"cta-newsletter-iw \">\n                                      \n        \n\n  <h2 id=\"register\" class=\"heading cta-heading  \">Sign up now and join the webinar!<\/h2>\n\n            <div class=\"cta-text\">Sign up for our newsletter now and get your free webinar access! You can unsubscribe at any time!\r\n\r\n<script src=\"\/custom\/subscribe-mc.js\"><\/script>\r\n<div id=\"campaign\" campaign-id=\"38\" campaign-lang=\"en\"><\/div>\r\n<\/div>\n      <div class=\"cta-form\">\n        <div class=\"cta-form\">\n                      \n                  <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":25,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_price":"","_stock":"","_tribe_ticket_header":"","_tribe_default_ticket_provider":"","_ticket_start_date":"","_ticket_end_date":"","_tribe_ticket_show_description":"","_tribe_ticket_show_not_going":false,"_tribe_ticket_use_global_stock":"","_tribe_ticket_global_stock_level":"","_global_stock_mode":"","_global_stock_cap":"","_tribe_rsvp_for_event":"","_tribe_ticket_going_count":"","_tribe_ticket_not_going_count":"","_tribe_tickets_list":"[]","_tribe_ticket_has_attendee_info_fields":false,"footnotes":""},"class_list":["post-29406","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>The New httpResource in Angular - ANGULARarchitects<\/title>\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.angulararchitects.io\/en\/the-new-httpresource-in-angular\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The New httpResource in Angular - ANGULARarchitects\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.angulararchitects.io\/en\/the-new-httpresource-in-angular\/\" \/>\n<meta property=\"og:site_name\" content=\"ANGULARarchitects\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-23T13:41:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/03\/webinar.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/03\/webinar.jpg\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/the-new-httpresource-in-angular\/\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/the-new-httpresource-in-angular\/\",\"name\":\"The New httpResource in Angular - ANGULARarchitects\",\"isPartOf\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/the-new-httpresource-in-angular\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/the-new-httpresource-in-angular\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/04\/AngularArchitects-Kudennlogos-in-einem-1024x145.png\",\"datePublished\":\"2025-03-26T09:58:09+00:00\",\"dateModified\":\"2025-05-23T13:41:22+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/the-new-httpresource-in-angular\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.angulararchitects.io\/en\/the-new-httpresource-in-angular\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/the-new-httpresource-in-angular\/#primaryimage\",\"url\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/04\/AngularArchitects-Kudennlogos-in-einem-1024x145.png\",\"contentUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/04\/AngularArchitects-Kudennlogos-in-einem-1024x145.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/the-new-httpresource-in-angular\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.angulararchitects.io\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"The New httpResource in Angular\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#website\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/\",\"name\":\"ANGULARarchitects\",\"description\":\"AngularArchitects.io\",\"publisher\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.angulararchitects.io\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\",\"name\":\"ANGULARarchitects\",\"alternateName\":\"SOFTWAREarchitects\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg\",\"contentUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg\",\"width\":644,\"height\":216,\"caption\":\"ANGULARarchitects\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/github.com\/angular-architects\",\"https:\/\/www.linkedin.com\/company\/angular-architects\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"The New httpResource in Angular - ANGULARarchitects","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.angulararchitects.io\/en\/the-new-httpresource-in-angular\/","og_locale":"en_US","og_type":"article","og_title":"The New httpResource in Angular - ANGULARarchitects","og_url":"https:\/\/www.angulararchitects.io\/en\/the-new-httpresource-in-angular\/","og_site_name":"ANGULARarchitects","article_modified_time":"2025-05-23T13:41:22+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/03\/webinar.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_image":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/03\/webinar.jpg","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.angulararchitects.io\/en\/the-new-httpresource-in-angular\/","url":"https:\/\/www.angulararchitects.io\/en\/the-new-httpresource-in-angular\/","name":"The New httpResource in Angular - ANGULARarchitects","isPartOf":{"@id":"https:\/\/www.angulararchitects.io\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.angulararchitects.io\/en\/the-new-httpresource-in-angular\/#primaryimage"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/the-new-httpresource-in-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/04\/AngularArchitects-Kudennlogos-in-einem-1024x145.png","datePublished":"2025-03-26T09:58:09+00:00","dateModified":"2025-05-23T13:41:22+00:00","breadcrumb":{"@id":"https:\/\/www.angulararchitects.io\/en\/the-new-httpresource-in-angular\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.angulararchitects.io\/en\/the-new-httpresource-in-angular\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/the-new-httpresource-in-angular\/#primaryimage","url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/04\/AngularArchitects-Kudennlogos-in-einem-1024x145.png","contentUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/04\/AngularArchitects-Kudennlogos-in-einem-1024x145.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.angulararchitects.io\/en\/the-new-httpresource-in-angular\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.angulararchitects.io\/en\/"},{"@type":"ListItem","position":2,"name":"The New httpResource in Angular"}]},{"@type":"WebSite","@id":"https:\/\/www.angulararchitects.io\/en\/#website","url":"https:\/\/www.angulararchitects.io\/en\/","name":"ANGULARarchitects","description":"AngularArchitects.io","publisher":{"@id":"https:\/\/www.angulararchitects.io\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.angulararchitects.io\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.angulararchitects.io\/en\/#organization","name":"ANGULARarchitects","alternateName":"SOFTWAREarchitects","url":"https:\/\/www.angulararchitects.io\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/","url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg","contentUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg","width":644,"height":216,"caption":"ANGULARarchitects"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/github.com\/angular-architects","https:\/\/www.linkedin.com\/company\/angular-architects\/"]}]}},"_links":{"self":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/pages\/29406","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/users\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/comments?post=29406"}],"version-history":[{"count":7,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/pages\/29406\/revisions"}],"predecessor-version":[{"id":30293,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/pages\/29406\/revisions\/30293"}],"wp:attachment":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/media?parent=29406"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}