Software architect. Web Development, build apps with Angular, TypeScript, JavaScript, and NestJS
Reading Time: 4 minutes Introduction In Angular 16, Angular has added two new lifecycle hooks, afterNextRender and afterRender, for DOM reading and writing. According to the Angular documentation, afterNextRender is similar to AfterViewInit but it does not cause issues that AfterViewInit has in SSR. On the other hand, afterRender executes after every change detection to synchronize state with DOM. … Read more
Reading Time: 5 minutes Introduction Before Angular 14, Angular achieves hierarchical dependency injection by injecting services in constructor and applying combination of @Host, @Self, @SkipSelf() and @Optional() decorators. In Angular 14, Angular team introduces inject() and it accepts inject options that can achieve the results. In this blog post, I am going to illustrate how to pass different inject … Read more
Reading Time: 4 minutes Introduction In this blog post, I am going to illustrate how to use directive composition API to power up host component. Directive composition API is new in Angular 15 and it allows host component to register standalone directives to modify its appearance. Moreover, Angular developers can use standalone directives as building blocks of complex directives … Read more
Reading Time: 4 minutes Introduction In this blog post, I am going to describe how to use the new syntax to pass inputs to ngComponentOutlet to create dynamic components in Angular. Prior to Angular 1.16.2, Angular allows injector input in ngComponentOutlet to provide values. Developers define injection token and useValue to provide Object/primitive value in providers array. With the … Read more
Reading Time: 5 minutes Introduction In this blog post, I want to describe how to perform UI customization using ViewContainerRef and Angular signals. Originally, I have a PokemonTabComponent that renders dynamic components using ViewContainerRef and the components are assigned a pokemon input. After rewrite, I refactor these components to inject Pokemon service in order to access the pokemon signal. … Read more
Reading Time: 4 minutes Introduction In this blog post, I want to describe how to do UI customization using ngComponentOutlet and Angular signals. Originally, I had a PokemonTabComponent that renders dynamic components using ngComponentOutlet and RxJS. I refactored the component to use signals and the code is surprisingly short, easy to understand and maintain. Moreover, I apply “signals in … Read more
Reading Time: 5 minutes Introduction In this blog post, I would like to convert “Service with a Subject” to “Service with a Signal ” and expose signals only. It is made possible by calling toSignal to convert Observable to signal. Then, I can pass signal values to Angular components to display data. After using signal values directly in the … Read more
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
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
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