{"id":28333,"date":"2025-02-23T20:45:10","date_gmt":"2025-02-23T19:45:10","guid":{"rendered":"https:\/\/www.angulararchitects.io\/blog\/learning-httpresource-with-super-mario\/"},"modified":"2025-06-03T14:54:00","modified_gmt":"2025-06-03T12:54:00","slug":"learning-httpresource-with-super-mario","status":"publish","type":"post","link":"https:\/\/www.angulararchitects.io\/en\/blog\/learning-httpresource-with-super-mario\/","title":{"rendered":"Angular’s new httpResource"},"content":{"rendered":"
\n\t\t\t\n\t\n\t\n\t\t

\n\t\t\tThis is post 9 of 9 in the series “Signals”<\/em>\t\t<\/p>\n\t\t\t<\/label>\n\n\t\t\t

\n\t\t\t
    \n\t\t\t\t\t\t\t\t\t
  1. Signals in Angular: Building Blocks<\/a><\/li>\n\t\t\t\t\t\t\t\t\t
  2. Component Communication with Signals: Inputs, Two-Way Bindings, and Content\/ View Queries<\/a><\/li>\n\t\t\t\t\t\t\t\t\t
  3. Successful with Signals in Angular – 3 Effective Rules for Your Architecture<\/a><\/li>\n\t\t\t\t\t\t\t\t\t
  4. Skillfully Using Signals in Angular – Selected Hints for Professional Use<\/a><\/li>\n\t\t\t\t\t\t\t\t\t
  5. When (Not) to use Effects in Angular — and what to do instead<\/a><\/li>\n\t\t\t\t\t\t\t\t\t
  6. Asynchronous Data Flow with Angular’s new Resource API<\/a><\/li>\n\t\t\t\t\t\t\t\t\t
  7. Streaming Resources in Angular – Details and Semantics<\/a><\/li>\n\t\t\t\t\t\t\t\t\t
  8. Streaming Resources for a Chat with Web Sockets: Messages in a Glitch-Free World<\/a><\/li>\n\t\t\t\t\t\t\t\t\t
  9. Angular’s new httpResource<\/span><\/li>\n\t\t\t\t\t\t\t<\/ol>\n\t\t<\/div>\n\t<\/div>\n

    Learning httpResource with Super Mario<\/h1>\n

    Angular 19.2 comes with the new httpResource<\/code> that fetches data within the reactive flow. This article shows how to use this -- currently experimental -- feature by implementing a simple application scrolling through levels in the style of the traditional Super Mario game.<\/p>\n

    Each level consists of tiles that are available in 4 different styles -- Overworld, Underground, Underwater, and Castle -- we can freely choose from:<\/p>\n

    The \ud83d\udcc2 source code<\/a> provides the shown component that takes care of loading level files (JSON) and tiles for drawing the levels via httpResource<\/code>. For rendering and animating the levels, the code also contains<\/strong> a very simple "engine"<\/strong> treated as a black box<\/strong> by this article.<\/p>\n

    Level Files<\/h2>\n

    The different levels are represented by JSON files defining which tiles, such as the floor or a cloud, are shown at which coordinates:<\/p>\n

    {\n  "levelId": 1,\n  "backgroundColor": "#9494ff",\n  "items": [\n    { "tileKey": "floor", "col": 0, "row": 13, [...] },\n    { "tileKey": "cloud", "col": 12, "row": 1, [...] },\n    [...]\n  ]\n}<\/code><\/pre>\n
    The coordinates define the position within a matrix of blocks with 16x16 pixels. Besides these level files, there is an overview.json<\/code> informing about the levels available:<\/p>\n
    {\n  "levels": [\n {\n      "levelKey": "01",\n      "title": "Level 1"\n },\n {\n      "levelKey": "02",\n      "title": "Level 2"\n },\n [...]\n ]\n}<\/code><\/pre>\n
    Loading JSON with ngResource<\/h2>\n
    To abstract the data access, hiding the creation of the httpResource<\/code> in a service is a good idea:<\/p>\n
    @Injectable({ providedIn: 'root' })\nexport class LevelLoader {\n  getLevelOverviewResource(): HttpResourceRef<LevelOverview> {\n    return httpResource<LevelOverview>(() => '\/levels\/overview.json', {\n      defaultValue: initLevelOverview,\n    });\n  }\n\n  getLevelResource(levelKey: () => string | undefined): HttpResourceRef<Level> {\n    return httpResource<Level>(() => !levelKey() ? undefined : \/levels\/${levelKey()}.json<\/code>, {\n      defaultValue: initLevel,\n    });\n  }\n\n [...]\n}<\/code><\/pre>\n
    The options object taken by the 2nd parameter allows the definition of a default value that is used before the resource has been loaded.<\/p>\n
    To define which level to load, getLevelResource<\/code> expects a Signal that returns a level key from which the service derives the file name. This read-only Signal is represented by the general abstraction () => string | undefined<\/code>.<\/p>\n
    Please note that the URL passed to getLevelResource<\/code> is represented by a lambda expression.<\/strong> This is necessary to make the resource automatically recompute<\/strong> the URL when the included levelKey<\/code> Signal changes. Underneath the covers, httpResource<\/code> uses this lambda expression to construct a Computed Signal acting as the trigger: Every time this trigger changes, the resource loads the URL.<\/p>\n
    To prevent triggering the httpResource<\/code>, this expression needs to return undefined<\/code>. This is necessary when the application needs to postpone loading until specific parameters, such as the levelKey<\/code>, become available.<\/p>\n
    More Options with Explicit HttpResourceRequest<\/h2>\n
    To get more control over the HTTP request issued, the caller can pass a HttpResourceRequest<\/code> instead of a URL:<\/p>\n
    getLevelResource(levelKey: () => string) {\n  return httpResource<Level>(\n    () => ({\n      url: \/levels\/${levelKey()}.json<\/code>,\n      method: "GET",\n      headers: {\n        accept: "application\/json",\n      },\n      params: {\n        levelId: levelKey(),\n      },\n      reportProgress: false,\n      body: null,\n      transferCache: false,\n      withCredentials: false,\n    }),\n    { defaultValue: initLevel }\n  );\n}<\/code><\/pre>\n
    Also, this HttpResourceRequest<\/code> can be represented by a lambda expression with which the httpResource<\/code> internally constructs a Computed Signal.<\/p>\n
    It's important to note that the httpResource<\/code> is only intended for fetching data,<\/strong> even though we can define a method (HTTP verb) beyond GET<\/code> and a body<\/code> transmitted as the payload. This option allows the consumption of Web APIs that don't align with the semantics of HTTP verbs. By default, the passed body<\/code> is converted to JSON. However, this option is not designed to write data back to the server. This task is not covered by the httpResource<\/code>. Also, while the automatic use of switchMap<\/code> semantics fits for fetching data, it is very likely the wrong behavior for writing data back to the server.<\/p>\n
    Using the reportProgress<\/code> option, the caller can request information about the progress of the current operation. This comes in handy when downloading larger files. The section below provides an example of this.<\/p>\n
    More on this: Angular Architecture Workshop (Remote, Interactive, Advanced)<\/h2>\n
    Become an expert for enterprise-scale and maintainable Angular applications with our Angular Architecture workshop!<\/a>\"\"<\/p>\n
    English Version<\/a> | German Version<\/a><\/p>\n
    Parsing and Validating the Received Data<\/h2>\n
    By default, the httpResource<\/code> expects JSON that fits the provided type parameter. Hence, after parsing the fetched JSON it just uses a type assertion to make TypeScript assume the specified type.<\/p>\n
    However, it's possible to hook into this process to provide custom logic for validating the received raw value and converting it to the type specified by the type parameter. For this, the caller can define a parse<\/code> function in the options object:<\/p>\n
    getLevelResourceAlternative(levelKey: () => string) {\n  return httpResource<Level>(() => \/levels\/${levelKey()}.json<\/code>, {\n    defaultValue: initLevel,\n    parse: (raw) => {\n      return toLevel(raw);\n    },\n  });\n}<\/code><\/pre>\n
    The httpResource<\/code> converts the received JSON to an object of type unknown<\/code> that is passed to parse<\/code>. In our example, a simple hand-written toLevel<\/code> function is used. However, parse<\/code> can also be used to connect the resource to a library specialized in schema validation such as Zod<\/a>.<\/p>\n
    Loading Data Beyond JSON<\/h2>\n
    While the httpResource<\/code> expects JSON converted to a JavaScript object by default, the caller can also request other data representations:<\/p>\n