Angular

Day 10 – Introduction to reactivity in Vue 3, Svelte 5 and Angular

by

Reading Time: 4 minutesOn day 10, we finally learn an essential concept of reactivity, which is deriving new states from existing states. In Vue 3 and Angular, the computed function is used to create a read-only reactive state from other states. Those states can be readonly or writable states. In Svelte 5, the derived states are created by $derived or $derived.by rune. There will … Read more

Day 8 – Attribute Binding in Vue 3, Svelte 5 and Angular

by

Reading Time: 2 minutesOn Day 8, I will demonstrate an example of attribute binding in Vue 3, SvelteKit, and Angular. In the example, the Save Item button is disabled unless the input length is at least 5. Disable the Save Item Button Conditionally From Vue 3.4+, the format of element attribute binding is :=. In the demo, we … Read more

Asynchronous redirectTo function in Angular Routing

by

Reading Time: 3 minutesOne of the new features in Angular 20.0.0-next.8 is the asynchronous redirect function. The redirect function redirects from a matched route path to another in the routing configuration. In version 19, the function’s return type is string | UrlTree, which is a synchronous value. This feature allows the function to return an Observable or a … Read more

Using HttpContext to Configure httpResource Requests

by

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

by

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

by

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

by

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

by

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

by

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