Using HttpContext to Configure httpResource Requests

Loading

Reading Time: 5 minutesAngular’s httpResource simplifies data fetching, and HttpContext allows you to pass metadata to HTTP interceptors. This combination provides a powerful way to manage HTTP requests, especially when you need to modify them dynamically. This blog post will explore how to integrate httpResource and HttpContext. We’ll focus on a practical example: setting the responseType of an HTTP request based on context. The Problem … Read more

Displaying httpResource Status Code and Headers in Error

Loading

Reading Time: 4 minutesIn Angular 19.2.7, a bug fix was made to set the appropriate status code and headers when a request fails in httpResource. The response has the same metadata in successful and failed HTTP requests; therefore, status code management can be handled similarly in all paths. When the status code is 200, the application will show a … Read more

Integrating Angular’s httpResource with HttpInterceptors

Loading

Reading Time: 4 minutesAngular’s httpResource provides a powerful and convenient way to work with HTTP requests, especially when dealing with resources like blobs and array buffers. However, real-world applications often require more than just basic data fetching. You might need to log request durations, modify request headers, or handle errors globally. That’s where HttpInterceptors come in. HttpInterceptors allow you to intercept and modify HTTP … Read more

Beyond JSON: Unleashing the Power of httpResource Sub-constructors in Angular

Loading

Reading Time: 5 minutesAngular v19.2.0 introduced a powerful new feature called httpResource, designed to streamline data fetching through HTTP requests. By default, httpResource elegantly handles JSON responses, automatically deserializing them into usable JavaScript objects. However, the real world of backend APIs often extends beyond JSON. Recognizing this, the Angular team has provided us with specialized sub-constructors of httpResource that … Read more

Mastering httpResource Equality in Angular

Loading

Reading Time: 4 minutesIntroduction to httpResource The httpResource function, introduced in Angular 19.2.0, provides a new way to fetch data in our Angular applications using the power of signals. It simplifies data fetching by automatically handling subscriptions and updates, integrating seamlessly with Angular’s reactive programming model. The httpResource function was first introduced in Angular 19.2.0 where its first argument is a URL, … Read more

Manipulate DOM with AfterRenderEffect in Angular

Loading

Reading Time: 3 minutesIn Angular 19, an experimental lifecycle hook, afterRenderEffect, allows developers to update the DOM reactively. Like afterNextRender and afterRender, afterRenderEffect has four phases: earlyRead, write, mixedReadWrite, and read. Four phases of AfterRenderEffect In this demo, I will use the afterRenderEffect to manipulate a DIV element to change its shape’s clip-path and color. The afterRenderEffect registers the effect and runs it after all the components are rendered. Two solutions will … Read more

Passing Data to Routed Components with RouterOutletData in Angular 19

Loading

Reading Time: 5 minutesAngular 19 introduces a convenient way to pass data to routed components using the routerOutletData input of the RouterOutlet directive. This feature simplifies data sharing between parent and child components within the routing hierarchy, enhancing component communication and reducing boilerplate code. The Problem It Solves Previously, passing data to routed components often involved complex workarounds, … Read more

Reset or set the value in LinkedSignal in Angular 19

Loading

Reading Time: 7 minutesThe new LinkedSignal feature introduced in Angular 19 provides a powerful mechanism for managing reactive state by allowing a signal to be directly linked to a source value. The LinkedSignal creates a WritableSignal; therefore, developers can set the value explicitly or update it when the source changes, facilitating a seamless synchronization between the two. This … Read more

Explain toSignal custom equality checking in Angular 18

Loading

Reading Time: 4 minutesIntroduction In this blog post, I want to describe the toSignal custom equality checking that Angular team released in version 18.1.0. toSignal supports an equal option where developers can pass in a function to determine whether or not two signal values are the same. The equal function was supported by the built-in signal when Angular … Read more

Preview let syntax in HTML template in Angular 18

Loading

Reading Time: 5 minutesIntroduction In this blog post, I want to describe the let syntax variable that Angular 18.1.0 will release. This feature has debates in the Angular community because some people like it, others have concerns, and most people don’t know when to use it in an Angular application. I don’t know either, but I use the … Read more