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

How to convert HTTP Response from Observable to Angular signal with toSignal

Loading

Reading Time: 6 minutes Introduction I extended my Pokemon application to call an API to retrieve a Pokemon by id. The HTTP request returned an Observable that required ngIf and async pipe to resolve in order to render the results in inline template. In this blog post, I want to demonstrate how to convert HTTP response to Signal with … Read more

Make RxJS and Angular Signal coexist in Pokemon Application

Loading

Reading Time: 5 minutes Introduction I wrote a simple Pokemon application in Angular 15 and RxJS to display image URLs of a specific Pokemon. There are 2 methods to update current Pokemon Id in order to update image URLS. The first method is by clicking buttons to increment or decrement the id by a delta. The other method is … Read more

Replace RxJS with Angular Signals in Pokemon Application

Loading

Reading Time: 4 minutes Introduction I wrote the simple Pokemon application in Angular 15 and RxJS to display image URLs of a specific Pokemon. In this use case, I would like to replace RxJS with Angular signals to simplify reactive codes. When code refactoring completes, ngOnInit method does not have any RxJs code and can delete. Moreover, ViewChild is … Read more

Interested in latest HTTP response? Use RxJS SwitchMap operator

Loading

Reading Time: 3 minutes Introduction This post wants to illustrate how to use switchMap operator to cancel previous HTTP requests and retrieve the latest Pokemon by an id. It is an important technique to preserve scarce network resource on a device such as mobile phone that has limited data plan. It also improves performance because the application does not … Read more

Reactive user interface in Angular with RxJS

Loading

Reading Time: 4 minutes Introduction This post wants to illustrate how powerful RxJS is when building a reactive user interface in Angular. The application is consisted of a group of buttons that can increment and decrement Pokemon id. When button click occurs, the observable emits the new id and renders the images of the new Pokemon. Bootstrap AppComponent In … Read more

Fun with speech detection using RxJS and Angular standalone components

Loading

Reading Time: 4 minutes Introduction This is day 20 of Wes Bos’s JavaScript 30 challenge where I build a speech detection application using RxJS, Angular standalone components and Web Speech API. Angular not only can call it’s own APIs to render components but it can also interact with Web Speech API to guess what I spoke in English and … Read more

Build a countdown timer using RxJS and Angular standalone components

Loading

Reading Time: 7 minutes Introduction This is day 29 of Wes Bos’s JavaScript 30 challenge where I build a countdown timer using RxJS, standalone components and standalone directive in Angular 15. Create a new Angular project Bootstrap AppComponent First, I convert AppComponent into standalone component such that I can bootstrap AppComponent and inject providers in main.ts. In Component decorator, … Read more

Discover the Power of Real-Time Search wit RxJS and Angular standalone components

Loading

Reading Time: 5 minutes Introduction This is day 6 of Wes Bos’s JavaScript 30 challenge where I create real-time search input box to filter out cities and states in the USA. This is a challenge for me because I had to rewrite the original real-time search using Angular and adopting the styles of the framework. In the tutorial, I … Read more

Create an analog clock using RxJS and Angular standalone components

Loading

Reading Time: 4 minutes Introduction This is day 2 of Wes Bos’s JavaScript 30 challenge where I create an analog clock that displays the current time of the day. In the tutorial, I created the components using RxJS, custom operators, Angular standalone components and removed the NgModules. In this blog post, I describe how to create an observable that … Read more