Model Inputs – Signal API that is missing in 2-way binding

Loading

Reading Time: 5 minutes Introduction In this blog post, I would like to show a new feature in Angular 17.2 that calls model inputs. Model input is a Signal API for 2-way binding between parent and child components. 2-way binding is always available and the official Angular documentation provides the following sizer example: With model inputs, I can bind … Read more

Signal queries in Angular – what can I do with them?

Loading

Reading Time: 5 minutes Introduction In this blog post, I would like to show a new feature in Angular 17.2 that is called signal queries. This new feature allows Angular engineers to use viewChild, viewChildren, contentChild, and contentChildren to obtain the value as a signal. In my demos, I would like to apply these signal queries on a template-driven … Read more

Analyze ways to retrieve data with signals and HttpClient in Angular

Loading

Reading Time: 5 minutes Introduction In this blog post, I would like to discuss how signal and HttpClient can retrieve data in Angular. In my observation, I found 5 data retrieval patterns and each one has its pros and cons. When the post analyzes data retrieval in Angular, I hope the readers can choose their preferred choice and apply … Read more

Examples of new signal inputs in Angular

Loading

Reading Time: 7 minutes Introduction In this blog post, I would like to show a new feature of Angular 17.1.0 that is called Signal input. New signal input is important in Angular because it can do things that previous version cannot. For example, signal input facilitates construction of computed signals. Signal input also allows API to use it as … Read more

A Deep Dive into Angular and Ngneat Query with Our Demo Store

Loading

Reading Time: 8 minutes Introduction In this blog post, I would like to deep dive into Angular and Tanstack query by calling a Store API to build a store demo. Tanstack query for Angular is a library for fetching, caching, sychronizing, and updating server data. ngneat/query is an Angular Tanstack query adaptor that supports Signals and Observable, fetching, caching, … Read more

Update page title with Title Strategy in Angular

Loading

Reading Time: 4 minutes Introduction In this blog post, I described how to update page title using custom title strategy class. Since Angular 14, a route has an optional title property that sets document title after navigation. In some use cases, a generic document title is suffice. In other use cases, pages display dynamic contents and the document title … Read more

Angular on Steroids: Elevating Performance with WebAssembly

Loading

Reading Time: 7 minutes Introduction In this blog post, I demonstrated how to use WebAssembly within an Angular application easily. In some cases, an Angular application wants to perform a task that is not fast in JavaScript. Developers can rewrite the algorithm in other languages such as AssemblyScript and Rust to write efficient codes. Then, the developers can compile … Read more

Queuing jobs in NestJS using @nestjs/bullmq package

Loading

Reading Time: 7 minutes Introduction Both Bull and BullMQ are queue libraries that persist jobs in Redis. Bull is in maintenance mode and maintainers only fix bugs in the library. The new version of the library, BullMQ, is rewritten in TypeScript. Bull and BullMQ are similar except BullMQ introduces flow producer that can split a resource-intensive job into children … Read more

Experience the magic of the new control flow in Angular 17

Loading

Reading Time: 6 minutes Introduction In this blog post, I demonstrated the migration of Angular 16 structure directives (NgIf and NgSwitch) to Angular 17 new control flow (@if/@else and @for/track) in a online shopping cart demo. During the migration exercise, I revised the inline templates to replace structure directives with the new control flow, deleted trackby function in Component … Read more

Retrieve route data with resolver function in Angular

Loading

Reading Time: 5 minutes Introduction In this blog post, I demonstrate the technique of using data resolver function to retrieve data during route change. When route finishes activation, component has access to the route data and can render it in template or to manipulate it to derive new states. I was working on a fake store demo where the … Read more