Software architect. Web Development, build apps with Angular, TypeScript, JavaScript, and NestJS
Reading Time: 2 minutesOn day 5, I will show how to bind an input field and a checkbox to the reactive states. The corresponding states are updated and displayed in the template when input values are updated. Create an input field and a checkbox The script tag has new refs that the HTML inputs will bind to. The … Read more
Reading Time: 3 minutesOn day 4, I will show how to render a list of items. Each row also has a Delete button that deletes the item from the list. When the list is updated, the template rerenders the list reactively. There is a new Item type for all applications. An item has an ID, a label, a purchased flag, … Read more
Reading Time: < 1 minuteOn day 3, I will interpolate the header expression in the template. Interpolate the header expression in the template In the script tag of the ShoppingCart component, I will create a header ref with an initial value. Then, the template uses the mustache syntax {{ expression }} to evaluate the ref and display its value. … Read more
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
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
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
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
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
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
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