Software architect. Web Development, build apps with Angular, TypeScript, JavaScript, and NestJS
RxJS
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
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
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
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
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
Reading Time: 7 minutes Introduction This is day 1 of Wes Bos’s JavaScript 30 challenge where I create a drum kit to play sounds when keys are pressed. In the tutorial, I created the components using RxJS, Angular standalone components and removed the NgModules. In this blog post, I describe how the drum component (parent) uses RxJS fromEvent to … Read more
Reading Time: 6 minutes Introduction This is day 26 of Wes Bos’s JavaScript 30 challenge where I hover link and open dropdown below it. I am going to use RxJS and Angular to rewrite the challenge from Vanilla JavaScript. In this blog post, I describe how to use RxJS fromEvent to listen to mouseenter event and emit the event … Read more
Reading Time: 5 minutes Introduction This is day 27 of Wes Bos’s JavaScript 30 challenge and I am going to use RxJS and Angular to click and slide a series of div elements. When mouse click occurs, I add a CSS class to the parent <div> element to perform scale transformation. When mouse is up or it exits the … Read more
Reading Time: 6 minutes Introduction This is day 23 of Wes Bos’s JavaScript 30 challenge and I am going to use RxJS and Angular to create a sticky navigation bar after window scrolls past the header. When the header is not in the viewport, I use RxJS behaviorSubject to update boolean flag to add CSS class to HTML element … Read more
Reading Time: 7 minutes Introduction This is day 22 of Wes Bos’s JavaScript 30 challenge and I am going to use RxJS and Angular to create a highlighter that follows a link when cursor hovers it. The follow along link highlighter updates CSS width, height and transform when mouseenter event occurs on the links of Angular components. In this … Read more