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

How to lazy-load routes and import standalone components in Angular

Loading

Reading Time: 4 minutes Introduction In Angular, routing is a key feature of application to navigate users to different pages to render components. A typical enterprise Angular application would lazy load routes and standalone components to maintain small main bundle to reduce the initial load time. In advanced case, such application even loads root-level and children routes to render … Read more

Render ngTemplates dynamically using ViewContainerRef in Angular

Loading

Reading Time: 5 minutes Introduction In Angular, we use ngTemplateOutlet to display ngTemplate when we know which ones and the exact number of them during development time. The other option is to render ngTemplates using ViewContainerRef class. ViewContainerRef class has createEmbeddedView method that instantiates embedded view and inserts it to a container. When there are many templates that render … Read more

Render dynamic components in Angular using viewContainerRef

Loading

Reading Time: 4 minutes Introduction In Angular, ngComponentOutlet is the simple way to render components dynamically. The other option is to render dynamic components using ViewContainerRef class. ViewContainerRef class has createComponent method that instantiates component and inserts it to a container. It is a powerful technique to add components at runtime; they are not loaded in main bundle to … Read more

Render dynamic components the simple way in Angular – ngComponentOutlet

Loading

Reading Time: 4 minutes Introduction In Angular, there are a few ways to render templates and components dynamically. There is ngTemplateOutlet that can render different instances of ng-template conditionally. When we use components, we can apply ngComponentOutlet to render the dynamic components the simple way or ViewContainerRef the complex way. In this blog post, I created a new component, … Read more

Compose RxJS custom operators to hide complex logic

Loading

Reading Time: 4 minutes Introduction This post describes how to compose RxJS custom operators from existing operators to hide complex logic. Not only RxJS custom operator encapsulates logic but it also promotes reusable operator in RxJS stream. In the Stackblitz example, I refactored a custom operator to emit a number between minimum value and maximum value. Then, the number … Read more

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