Angular on Steroids: Elevating Performance with WebAssembly

Loading

Reading Time: 7 minutes Introduction In this blog post, I demonstrated how to use WebAssembly within an Angular application easily. In some cases, an Angular application wants to perform a task that is not fast in JavaScript. Developers can rewrite the algorithm in other languages such as AssemblyScript and Rust to write efficient codes. Then, the developers can compile … Read more

Queuing jobs in NestJS using @nestjs/bullmq package

Loading

Reading Time: 7 minutes Introduction Both Bull and BullMQ are queue libraries that persist jobs in Redis. Bull is in maintenance mode and maintainers only fix bugs in the library. The new version of the library, BullMQ, is rewritten in TypeScript. Bull and BullMQ are similar except BullMQ introduces flow producer that can split a resource-intensive job into children … Read more

Experience the magic of the new control flow in Angular 17

Loading

Reading Time: 6 minutes Introduction In this blog post, I demonstrated the migration of Angular 16 structure directives (NgIf and NgSwitch) to Angular 17 new control flow (@if/@else and @for/track) in a online shopping cart demo. During the migration exercise, I revised the inline templates to replace structure directives with the new control flow, deleted trackby function in Component … Read more

Retrieve route data with resolver function in Angular

Loading

Reading Time: 5 minutes Introduction In this blog post, I demonstrate the technique of using data resolver function to retrieve data during route change. When route finishes activation, component has access to the route data and can render it in template or to manipulate it to derive new states. I was working on a fake store demo where the … Read more

How to register providers in environment injector in Angular

Loading

Reading Time: 5 minutes Introduction In this blog post, I describe how to register providers in environment injector in Angular. One way to create an environment injector is to use the ENVIRONMENT_INITIALIZER token. When I have several providers and they don’t have to execute any logic during bootstrap, I can use makeEnvironmentProviders to wrap an array of providers to … Read more

Angular 2-way data binding to build complex form

Loading

Reading Time: 6 minutes Introduction In this blog post, I describe how to use Angular 2-way data binding and typed reactive forms to build complex form. The original idea is from Vue 3 2-way model where the child components emit form values to the parent component. When the parent component clicks the submit button, the submit event calls a … Read more

How to run long tasks in Angular environment injector

Loading

Reading Time: 5 minutes Introduction Angular 14 introduced ENVIRONMENT_INITIALIZER token that enables developers to run long tasks during the construction of Angular environment injector. For standalone component, I inject the new token in the providers array and pass the provider to bootstrapApplication() function. Moreover, I found a use case of hierarchical dependency (explained here) where inject() ensures this provider … Read more

DOM reading and writing with new lifecycle hooks in Angular

Loading

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

Mastering Angular’s Hierarchical Dependency Injection with inject() Function

Loading

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

Power up host component by directive composition API in Angular

Loading

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