Too many ViewChild? Try ViewChildren to query DOM elements

Loading

Reading Time: 3 minutes Introduction This post describes how to refactor component to use ViewChildren to query DOM elements. It is a common case when inline template has several elements of the same type and the component uses ViewChild to query them. When this pattern occurs, we can consider to render the elements using ngFor and applying ViewChildren to … 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