Uncategorized

Day 2 – Create a ShoppingCart component

by

Loading

Reading Time: < 1 minuteOn day 2, I will delete the boilerplate codes and create the ShoppingCart component. Create the shopping cart component Deleted all the files from the components/ folder.Create ShoppingCart.vue in the component/ folder. The template has a paragraph element that displays “Shopping Cart”. Updated the codes in App.vue that failed to compile Create shopping-cart.svelte in the lib/ folder. The template has a paragraph element that displays “Shopping Cart”. … Read more

Day 1 – Create a new projects, dependencies, and global CSS styles

by

Loading

Reading Time: 2 minutesThe contents are from Vue School’s Vue.js 3 Fundamental with the Composition API. The Vue app was written in TypeScript + Composition API, and then it was ported to Angular 19 and Svelte 5 to get a first-hand experience of their similarities and differences. This is a simple shopping cart that adds and deletes items from … Read more

In keyword in binary expression of an HTML template

by

Loading

Reading Time: 3 minutesOne of the new features in Angular 20.0.0-next.8 is the “in” keyword in binary expressions in templates. This keyword enables testing the existence of properties in an object before their values are interpolated in Angular expressions. Without it, the component class defines methods to perform the check and invokes them in the template. The Problem … Read more

Asynchronous redirectTo function in Angular Routing

by

Loading

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

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

by

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

by

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

by

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

by

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

by

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