State Management in Angular using NgRx Signal Store

Loading

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

State Management in Angular using Tanstack Store

Loading

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

Build full stack text translation application with Angular and Generative AI

Loading

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

HostAttributeToken – Injection token of static host attribute in Angular

Loading

Reading Time: 5 minutes Introduction HostAttributeToken is a new feature in Angular 17.3.0 that injects static attributes of the host node. The decorator version of HostAttributeToken is @Attribute, and it is recommended to use it over @Input because Input triggers change detection even when the input value is static. Before Angular 17.3.0, HostAttributeToken is an injection token to inject … Read more

Create a generative AI application with Angular and Gemini REST API

Loading

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

New output function – let’s talk without a decorator in Angular

Loading

Reading Time: 6 minutes Introduction In this blog post, I would like to show a new feature in Angular 17.3.0-rc.0 that calls the output function. With the new output function, a child component can emit data to the parent without a decorator. Moreover, the return type of the new output function is OutputEmitterRef that can convert to an Observable … Read more

Model Inputs – Signal API that is missing in 2-way binding

Loading

Reading Time: 5 minutes Introduction In this blog post, I would like to show a new feature in Angular 17.2 that calls model inputs. Model input is a Signal API for 2-way binding between parent and child components. 2-way binding is always available and the official Angular documentation provides the following sizer example: With model inputs, I can bind … Read more

Signal queries in Angular – what can I do with them?

Loading

Reading Time: 5 minutes Introduction In this blog post, I would like to show a new feature in Angular 17.2 that is called signal queries. This new feature allows Angular engineers to use viewChild, viewChildren, contentChild, and contentChildren to obtain the value as a signal. In my demos, I would like to apply these signal queries on a template-driven … Read more

Analyze ways to retrieve data with signals and HttpClient in Angular

Loading

Reading Time: 5 minutes Introduction In this blog post, I would like to discuss how signal and HttpClient can retrieve data in Angular. In my observation, I found 5 data retrieval patterns and each one has its pros and cons. When the post analyzes data retrieval in Angular, I hope the readers can choose their preferred choice and apply … Read more

Examples of new signal inputs in Angular

Loading

Reading Time: 7 minutes Introduction In this blog post, I would like to show a new feature of Angular 17.1.0 that is called Signal input. New signal input is important in Angular because it can do things that previous version cannot. For example, signal input facilitates construction of computed signals. Signal input also allows API to use it as … Read more