Software architect. Web Development, build apps with Angular, TypeScript, JavaScript, and NestJS
Reading Time: 6 minutes Introduction Many companies and developers use Angular to build Enterprise applications, which are so large that they must manage a lot of data. To maintain the applications in scale, developers tend to use state management libraries or the Angular Signal API to manage states. In this blog post, I want to use the NgRx Signal … Read more
Reading Time: 6 minutes Introduction Many companies and developers use Angular to build Enterprise applications, which are so large that they must manage a lot of data. To maintain the applications in scale, developers tend to use state management libraries or the Angular Signal API to manage states. In this blog post, I want to use the TanStack Store … Read more
Reading Time: 5 minutes Introduction I am a language learner who learns Mandarin and Spanish in my spare time. When I discovered that text translation using LLM is possible, I wanted to leverage the strength of LangChain and Gemini 1.0 Pro model in my hobby. Therefore, I built an Angular application to make a backend request to translate texts … Read more
Reading Time: 7 minutes Introduction In this blog post, I show how to create a generative AI application that uses Angular and Gemini REST API. Therefore, it is feasible to build basic generative AI without a backend. The application demonstrates 2 use cases Generate Gemini API Key Go to https://aistudio.google.com/app/apikey to generate an API key for a new or … Read more
Reading Time: 4 minutes Introduction In this blog post, I described how to update page title using custom title strategy class. Since Angular 14, a route has an optional title property that sets document title after navigation. In some use cases, a generic document title is suffice. In other use cases, pages display dynamic contents and the document title … Read more
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
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
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
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
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