Connie's Programming Journey

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

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

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

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

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

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