Forem: Khoa Nguyen

Anguar Tips #4

Khoa Nguyen — Wed, 07 Jan 2026 09:43:01 +0000

Some Tips for Working with Angular - From a Frontend Developer - Part 4.

Let's continue our journey on Angular.

As always, let me know in the comments if you find this interesting to read or if there's anything I can improve. I'd love to hear your feedback!

Note: These tips require prior knowledge and experience with Angular. I will not dive deep into RxJS or other fundamental concepts.

Asynchronous streams for an input array

Let's say you have an array of values and you want to perform an asynchronous action for each item. How can you achieve this using Observables?

In this case, the concatMap operator is the perfect choice. It allows you to process each item sequentially, waiting for the previous asynchronous operation to complete before moving on to the next one.

Here's how you can implement it:

const numbers = [1, 2, 3];
const test$ = from(numbers).pipe(
  concatMap((number) => {
    return of(null).pipe(
      tap(() => console.log(number)),
      delay(2000)
    )
  }),
)

With this code, when the source created by the from operator emits values, each emission will wait until the asynchronous operation inside concatMap completes before the next value is processed.

As a result, using the code above, the console.log statement will be executed after 2 seconds for each value, and the final result will be:

But we’re not done yet. What if you need to execute another synchronous action after that?

For example, suppose there is another tap operator placed after the previous one, like this:

const test$ = from(numbers).pipe(
  concatMap((number) => {
    return of(null).pipe(
      tap(() => console.log(number)),
      delay(2000)
    )
  }),
  tap(() => console.log("This go here!")),
)

In this scenario, the "This goes here!" log statement will be executed after the function inside concatMap completes. As a result, the log function will run three times, once for each emitted value. Here is the output:

So, in this case, we need to use the last operator to ensure that the function is executed only after all values have been processed.

const test$ = from(numbers).pipe(
  concatMap((number) => {
    return of(null).pipe(
      tap(() => console.log(number)),
      delay(2000)
    )
  }),
  last(),
  tap(() => console.log("This go here!")),
)

With this implementation, the "This goes here!" log will be executed only once, after all the number logs have been completed.

Now, our stream is working exactly as intended. concatMap is really beneficial if you use it properly.

And that's all for blog #4 about the Angular tips! I hope you found these tips helpful. See you in my next blog!

Config SSH GitHub with Multiple Accounts

Khoa Nguyen — Mon, 24 Mar 2025 09:33:14 +0000

When working with GitHub, you might need to switch between different accounts, such as a personal account and a company account. If not configured properly, this can become messy. So, how do we manage it efficiently? Let's get started.

Note: This instruction is for Linux OS.

1. Generate SSH key based on profiles

Using this command ssh-keygen -t rsa -C "example@gmail.com" to generate the account based on the email you used.

The result of the command is:

Generating public/private rsa key pair.
Enter file in which to save the key (/home/khoanguyen/.ssh/id_rsa):

Usually, we store our SSH key in the .ssh folder, so let's keep the folder location and only change the file name. For example, if I want to name the key example, I will enter the path as /home/khoanguyen/.ssh/example.

Then, you will be asked to input the passphrase:

Enter passphrase (empty for no passphrase):

Usually, I leave it empty and skip the passphrase since I don’t want to enter it repeatedly when working with GitHub. However, if security is your priority, adding a passphrase will provide an extra layer of protection.

That’s it for the first profile. Now, we’ll do the same for the second profile, and for this one, I will store the file in /home/khoanguyen/.ssh/example2.

2. Add SSH key to GitHub config file.

Now, we have two SSH keys stored in the .ssh folder. Next, let's link these keys to our GitHub config file.

First, create a file called config inside ~/.ssh/ using the following command:

cd ~/.ssh/
touch config

Then, add these lines of codes to the config file:

#example account
    Host github.com-example
        HostName github.com
        User example
        IdentityFile ~/.ssh/example

#example 2 account
    Host github.com-example2
        HostName github.com
        User example2
        IdentityFile ~/.ssh/example2

With:

Host: This is the identifier for each profile. The github.com part remains the same, but you can add an identifier after it. In my case, I named them example and example2.
HostName: This should always be github.com for every profile.
User: Your GitHub username.
IdentityFile: The path to the private SSH key file. Since we already stored them in the .ssh folder, we just need to reference the correct file.

3. Cloning repo with different accounts.

Prequesite, we need the 2 SSH keys added to GitHub account. To do this, you can follow step by step in GitHub official docs https://docs.github.com/en/authentication/connecting-to-github-with-ssh/adding-a-new-ssh-key-to-your-github-account.

Next, for cloning private repo from account example. I will enter this command in the terminal:

git clone git@github.com-example:khoanguyn1411/Next-MyPortfolio.git

Note: We have added the suffix -example after the host, as configured in the config file. This tells your local GitHub setup to use the example profile with the correct SSH key path when cloning the repository. And just like that—boom! 🎉 You're now able to clone the repo successfully.

4. Changing GitHub profile when pushing commits

Sometimes, your push to a GitHub repository might be rejected. This usually happens because you're using the wrong GitHub profile. To fix this, simply switch to the correct profile before pushing your code.

git config user.name "example"
git config user.email "example@gmail.com"

And that's all for managing multiple GitHub profiles! Thanks for reading.

Angular Tips #3

Khoa Nguyen — Sat, 01 Mar 2025 12:08:23 +0000

Some Tips for Working with Angular - From a Frontend Developer - Part 3.

Welcome to part 3 of Angular Tips. I hope you find them useful in your process of mastering Angular.

As always, let me know in the comments if you find this interesting to read or if there's anything I can improve. I'd love to hear your feedback!

Note: These tips require prior knowledge and experience with Angular. I will not dive deep into RxJS or other fundamental concepts.

Using the Abstract class to define services includes things in common.

Abstract classes are very powerful in TypeScript and extremely useful when working with Angular. They help enforce structure, promote reusability, and keep your codebase clean and maintainable.

In Angular, there are scenarios where you need to define multiple services that share many common functionalities. In such cases, you can use an abstract class as a base service to inherit and centralize shared logic across different services.

For example, I have two services: book.service.ts and music.service.ts. They are defined as follows:

// Book service

import { Injectable } from "@angular/core";
import { Observable, of } from "rxjs";

type Book = {
  readonly name: string;
  readonly author: string;
};

@Injectable({ providedIn: "root" })
export class BookService {
  protected readonly page$: Observable<readonly Book[]>;

  protected getBooks$(): Observable<readonly Book[]> {
    return of([{ name: "Book 1", author: "Conan" }]);
  }

  protected resetBooks$(): Observable<readonly Book[]> {
    return of([]);
  }

  constructor() {
    this.page$ = this.getBooks$();
  }
}

// Music service

import { Injectable } from "@angular/core";
import { Observable, of } from "rxjs";

type Music = {
  readonly name: string;
  readonly artist: string;
};

@Injectable({ providedIn: "root" })
export class BookService {
  protected readonly page$: Observable<readonly Music[]>;

  protected getMusics$(): Observable<readonly Music[]> {
    return of([{ name: "Music 1", artist: "Edward" }]);
  }

  protected resetMusics$(): Observable<readonly Music[]> {
    return of([]);
  }

  constructor() {
    this.page$ = this.getMusics$();
  }
}

As you can see, both services have identical functionality. So, how can we generalize them into a base service?
Simple - use an abstract class with a generic type to create a reusable base service!

So, we need to define a general (or base) service like this:

// Base service.

import { Observable, of } from "rxjs";

export abstract class BaseService<T extends Record<string, any>> {
  protected readonly page$: Observable<readonly T[]>;

  protected abstract getList$(): Observable<readonly T[]>;

  protected resetList$(): Observable<readonly T[]> {
    return of([]);
  }

  constructor() {
    this.page$ = this.getList$();
  }
}

In this base service, I keep the page$ observable and the resetList method since they are exactly the same in both services-the only difference is their type. By using a generic type in our base class, we resolve this type difference effectively.

Next, I define an abstract function called getList$(). This function is meant to be implemented differently in each specific service, depending on its purpose. Declaring it as abstract allows each child service to define its own implementation while still inheriting the shared logic from the base service.

Now that we have the base service, the next step is to create our BookService and MusicService, extending from the base service like this:

// Book service
import { Injectable } from "@angular/core";
import { Observable, of } from "rxjs";
import { BaseService } from "./base.service";

type Book = {
  readonly name: string;
  readonly author: string;
};

@Injectable({ providedIn: "root" })
export class BookService extends BaseService<Book> {
  protected getList$(): Observable<readonly Book[]> {
    return of([{ name: "Book 1", author: "Conan" }]);
  }
}

// Music service

import { Injectable } from "@angular/core";
import { Observable, of } from "rxjs";
import { BaseService } from "./base.service";

type Music = {
  readonly name: string;
  readonly artist: string;
};

@Injectable({ providedIn: "root" })
export class BookService extends BaseService<Music> {
  protected getList$(): Observable<readonly Music[]> {
    return of([{ name: "Music 1", artist: "Edward" }]);
  }
}

As you can see, we only need to redefine the abstract getList$() function in each service. Everything else is inherited from the base service, making our code cleaner, more maintainable, and reusable.

Implement Lazy Loading for Optimizing Application Performance, but be careful.

Lazy loading in Angular is a technique used to load feature modules only when needed, reducing the initial bundle size and improving application performance. Instead of loading all modules upfront, Angular loads them dynamically when a user navigates to a specific route.
We can define a lazy load module, like this:

const routes: Routes = [
  {
    path: 'feature',
    loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule)
  }
];

However, this is not always case where lazy load come to rescue. With lazy load, they will load the module only when it's needed, which mean, as a traceback, the loading time in the first visit of the component require that module will be increased.
When Lazy Loading Can Hurt UX:

Heavy Pages: If a page has a large bundle size, lazy loading can introduce a noticeable delay, making users think the app is slow or broken.
Frequent Navigation: If users frequently switch between pages, repeatedly loading modules can be inefficient.
Above-the-Fold Content: If a page requires immediate rendering of essential content, lazy loading might cause delays.

So, to use lazy loading efficiently, let's combine it with preloadStrategies. To dive deeper into preloadStrategies in Angular, I recommend checking out the blog: Optimize your Angular app's user experience with preloading strategies. This resource is extremely useful for understanding how to choose the right preloadStrategies for your app.

And that's all for blog #3 about the Angular tips! I hope you found these tips helpful. See you in my next blog!

Angular Tips #2

Khoa Nguyen — Sat, 01 Mar 2025 11:54:51 +0000

Some Tips for Working with Angular — From a Frontend Developer — Part 2.

Let’s continue the series on tips for working with Angular — the most challenging framework.

As always, let me know in the comments if you find this interesting to read or if there’s anything I can improve. I’d love to hear your feedback!

Note: These tips require prior knowledge and experience with Angular. I will not dive deep into RxJS or other fundamental concepts.

Get and Use the Previous Value of a `BehaviorSubject`

There are times when we need to retrieve the previous value of a BehaviorSubject for calculations. For example, increasing the current value by 1. There are two ways to do this:

1/ Using the the getValue() function of behavior subject.
For this approach, you can use this like:

protected increaseVal1() { 
  this.var1$.next(this.var1$.getValue() + 1);
}

This approach is straight-forward and easy to implement. However, in some projects, accessing the value property of a BehaviorSubject is forbidden, meaning you cannot use the getValue() function freely. There are specific reasons for this, but I won’t dive deep into them in this article. If you're interested, I recommend researching it further on Google.

So, if we can’t use getValue(), how can we achieve this?
2/ Using observables
With a little RxJS magic, you can achieve the same result using observables:

 protected increaseVal1() {
    this.var1$
      .pipe(
        first(),
        tap((v) => this.var1$.next(v + 1)),
      )
      .subscribe();
  }

The first operator ensures that we only take the initial value from the stream and then unsubscribe immediately, preventing an infinite loop or memory leaks. Therefore, using first() or take(1) is essential here.

This approach does not violate any best practices or project rules, so I often use it in my projects. Hope this helps you as well!

Use the `debounceTime` operator when a value changes multiple times, but you only need the source to emit once.

Sometimes, in our projects, we encounter situations where we need the source to emit only once, even if the value is updated multiple times. For example, consider the following component:

import { Component, OnInit } from "@angular/core";
import { BehaviorSubject, first, skip, tap } from "rxjs";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})
export class AppComponent implements OnInit {
  protected readonly var1$ = new BehaviorSubject(100);

  ngOnInit(): void {
    this.var1$
      .asObservable()
      .pipe(
        skip(1),
        tap((val1) => console.log({ val1 })),
      )
      .subscribe();
  }

  protected increaseVal1() {
    this.var1$
      .pipe(
        first(),
        tap((v) => this.var1$.next(v + 1)),
      )
      .subscribe();
  }

  protected changeValue1() {
    this.increaseVal1();
    this.increaseVal1();
  }
}

<div>
  <p>Value 1: {{ var1$ | async }}</p>
  <button (click)="changeValue1()">Increase Value 1</button>
</div>

And the UI for this code looks like this:

When I click the “Increase Value 1” button, the logs are:

As you can see, the tap operator is called twice because the increaseVal1 function is executed twice synchronously within the changeValue1 function.

In some cases, you might want the tap operator to execute only once, using the latest value, even if the function that changes the value is called multiple times.

How can we achieve that? Simple — just add the debounceTime(0) operator beforehand.

  ngOnInit(): void {
    this.var1$
      .asObservable()
      .pipe(
        skip(1),
        debounceTime(0),
        tap((val1) => console.log({ val1 })),
      )
      .subscribe();
  }

Now, when you click the button, the logs will include only the latest value, meaning the tap operator is executed only once.

When you add debounceTime(0), RxJS delays the emissions until the current event loop cycle ends, so:

Both pipe(...).subscribe() calls happen in the same JavaScript tick.
Since debounceTime(0) defers execution, both calls collapse into one before emitting a value.
As a result, console.log in tap operator only run once.
In real-world projects, this scenario might be rare, but if you ever encounter it, you can use this approach to handle it effectively.

And that’s all for blog #2 about the Angular tips! I hope you found these tips helpful. See you in my next blog!

Angular Tips #1

Khoa Nguyen — Sat, 01 Mar 2025 11:46:07 +0000

Some Tips for Working with Angular — From a Frontend Developer.

Angular is an extremely challenging framework for beginners to learn. It offers a wide range of features, from simple to highly complex functionalities, making it quite overwhelming. As a front-end developer who has worked with multiple frameworks like React, Vue, and Svelte, I can confidently say that Angular is the most challenging one to learn and work with.

However, the more time I spend working with Angular, the more I realize that it is an incredibly powerful framework when used proficiently. It offers a complete ecosystem that provides everything needed to build functional, complex, and visually appealing websites.

Angular is powerful, but as I mentioned earlier, its learning curve is quite challenging. Through this blog, I want to share some tips I’ve learned from working with Angular for many years. I understand that some of these tips may not be entirely applicable to every project. If that’s the case, feel free to let me know in the comments. Now, let’s get started!

Note: These tips require prior knowledge and experience with Angular. I will not dive deep into RxJS or any fundamental concepts.

Prefer using `OnPush` for the change detection strategy over the `Default` one.

When working with Angular, I prefer using OnPush as the change detection strategy in all my projects. The reason is quite simple:

It reduces the number of checks needed to detect state changes and update the DOM. Naturally, the less work the application has to do, the better its performance and user experience.
I have more control over my components. You might think that using OnPush requires manually triggering change detection every time data is updated, which could lead to unexpected bugs if forgotten. However, in the next tip, I'll show you how I usually prevent such scenarios.
It helps prevent race condition errors when working with complex streams and subscribers. While rare, they do happen — I encountered them two or three times when using the Default strategy. These issues are difficult to reproduce, but trust me, they can be extremely frustrating and complicated to fix properly.

If you don’t want to manually update the change detection strategy every time you create a new component, you can set OnPush as the default across your application by configuring it in the angular.json file.

// angular.json
{
  //...
  "schematics": {
    "@schematics/angular": {
      "component": {
        "changeDetection": "OnPush"
      }
    }
  }
}

Prior to using `async` pipe or `signal`

The async pipe is a powerful tool in Angular that simplifies working with observables. To use it, your data must be defined as an observable. So why is it so useful?

It ensures seamless state and view updates. As mentioned earlier, there’s a way to automatically trigger change detection whenever the data changes — this is exactly what the async pipe does. Under the hood, it calls markForCheck, ensuring the component is checked for changes when a new value from the source of observable is emitted.
It prevents memory leaks. When the component is destroyed, the async pipe automatically unsubscribes from the observable, eliminating the need to manually manage subscriptions. This is crucial for maintaining performance in web applications.
With Angular 18, a new API called signal has been introduced. Like the async pipe, signal handle change detection and memory management automatically. I won’t dive deep into signal here, as its functionality is straightforward and well-documented in the official Angular docs.

In short, if your application isn’t using the async pipe or signal yet, consider updating it. I promise—it will be a huge relief!

And that’s all for blog #1 about the Angular tips! I hope you found these tips helpful. See you in my next blog!