DEV Community: Nhan Nguyen

Conditional Validation in Angular 21 Signal Forms: `when` vs `applyWhen`

Nhan Nguyen — Thu, 11 Dec 2025 04:10:34 +0000

Angular 21's Signal Forms introduce a powerful, declarative approach to conditional validation that makes complex form logic much cleaner. Let's break down the two main approaches: when and applyWhen.

The `when` Property: Single Rule Conditions

The when property allows you to conditionally apply a single validation rule based on other field values. Perfect for simple conditional requirements:

required(schemaPath.email, {
  message: 'Email is required',
  when: ({ valueOf }) => valueOf(schemaPath.sendViaEmail) === true,
});

Here, the email field is only required when the sendViaEmail checkbox is checked. The valueOf() function gives you reactive access to any field's current value.

The `applyWhen` Function: Multiple Rule Conditions

When you need to apply multiple validation rules conditionally, reach for applyWhen. It takes three arguments:

The field path to validate
A predicate function (your condition)
A schema function containing all the rules to apply

applyWhen(
  schemaPath.email,
  ({ valueOf }) => valueOf(schemaPath.sendViaEmail) === true,
  (emailPath) => {
    required(emailPath, { message: 'Email is required' });
    email(emailPath, { message: 'Enter a valid email address' });
  }
);

This groups related validation logic together and keeps your schema clean and readable.

When to Use Which?

Use when: For single validation rules that need a condition
Use applyWhen: For multiple related rules that share the same condition

Both approaches leverage Signal Forms' reactive nature—validation updates automatically as field values change, with no manual subscription management needed.

The Bottom Line

Signal Forms' conditional validation features make complex form logic declarative and maintainable. Whether you're validating a single field or orchestrating multiple dependent rules, the when property and applyWhen function give you the flexibility to express your form's business logic clearly and concisely.

Ready to try Signal Forms? Remember it's currently experimental in Angular 21, but it's already showing promise as the future of Angular forms!

Example

Happy coding!

I hope you found it helpful. Thanks for reading!
Let's get connected! You can find me on:

Medium: https://medium.com/@nhannguyenuri/
Dev: https://dev.to/nhannguyenuri/
Linkedin: https://www.linkedin.com/in/nhannguyenuri/
Support Me: https://buymeacoffee.com/nhannguyenuri

Building a Reactive Login Form with Angular Signal Forms

Nhan Nguyen — Mon, 24 Nov 2025 04:36:36 +0000

Signal-based forms are one of the coolest new additions to Angular’s ecosystem.

Let’s walk through what the sample login form above is doing and why it’s nice to work with.

1. Modeling the form with signals

First, we define a simple data model:

type LoginData = {
  email: string;
  password: string;
};

Then we create a signal that holds that model:

loginModel = signal<LoginData>({
  email: '',
  password: '',
});

This signal is our single source of truth for the form’s state. Instead of separate controls, we bind the whole object and let the form() helper take care of wiring it up.

2. Creating a signal form

loginForm = form(this.loginModel, (login) => {
  required(login.email, { message: 'Email is required' });
  email(login.email, { message: 'Enter a valid email address' });

  required(login.password, { message: 'Password is required' });
  pattern(
    login.password,
    /^((?=\S*?[A-Z])(?=\S*?[a-z])(?=\S*?[0-9]).{6,})\S$/,
    {
      message:
        'Password must be at least 6 characters long and include at least one uppercase letter, one lowercase letter, and one number, with no spaces.',
    }
  );
});

What’s going on here?

form(this.loginModel, …) creates a signal form bound to the loginModel signal.
Inside the callback, login exposes field-level signals like login.email and login.password.
We attach validation rules using helpers like:
- required(field, { message })
- email(field, { message })
- pattern(field, regex, { message })

Each field now knows:

Its current value (as a signal)
Its validation status
Its list of errors (if any)

3. Binding to the template with and [field]

In the template, we don’t deal with [(ngModel)] or formControlName. Instead, we use the Field standalone component and bind the field signal:

<input type="email" [field]="loginForm.email" />

That’s enough for Angular to:

Set the input’s value
Update the field when the user types
Trigger validation

To show validation errors, we just read from the field’s errors() signal:

@for (err of loginForm.email().errors(); track err.kind) {
  <p style="color: red; font-size: smaller">*{{ err.message }}</p>
}

Same for the password field.

And because everything is signal-based, we can easily display live values:

<p>Hello {{ loginForm.email().value() }}!</p>
<p>Password length: {{ loginForm.password().value().length }}</p>

No async pipes, no manual subscription management—just reading signal values.

4. Reacting to form changes with RxJS

Signals are great, but sometimes you still want an RxJS stream—for example, to debounce user input before saving or logging.

That’s what this part does:

constructor() {
  toObservable(this.loginForm().value)
    .pipe(
      debounceTime(500),
      distinctUntilChanged(),
      takeUntilDestroyed(this.destroyRef)
    )
    .subscribe((value) => {
      console.log(value);
    });
}

Breakdown:

this.loginForm().value is a signal representing the full form value.
toObservable(...) converts that signal into an Observable.
We apply RxJS operators:
- debounceTime(500) – wait 500ms after the last change.
- distinctUntilChanged() – only react when the value actually changes.
- takeUntilDestroyed(this.destroyRef) – automatically clean up when the component is destroyed.
Finally, we subscribe and log the result.

This gives you the best of both worlds:

Signals for template binding and simple reactivity.
RxJS for more advanced reactive pipelines.

5. Why signal forms feel so good

A few nice properties of this approach:

Type-safe by default: The form is built from a typed model (LoginData).
No manual subscriptions for validation or display — signals handle it.
Template stays clean: [field] is easier to reason about than mixing ngModel, FormControl, and validators.
Easy interoperability with existing RxJS-based code via toObservable.

Wrap-up

This small login example shows how signal-based forms can simplify form handling in Angular:

Define a typed model.
Wrap it with form() and attach validation.
Bind fields with [field].
Use signals directly in the template.
Convert to observables when you need RxJS power.

Example

Happy coding!

I hope you found it helpful. Thanks for reading!
Let's get connected! You can find me on:

Medium: https://medium.com/@nhannguyenuri/
Dev: https://dev.to/nhannguyenuri/
Linkedin: https://www.linkedin.com/in/nhannguyenuri/

Modern Angular State Management with Signals and Dependency Injection

Nhan Nguyen — Tue, 21 Oct 2025 07:11:13 +0000

In this post, we’ll explore how to combine Angular’s Signals with Dependency Injection to create predictable, reactive, and reusable component state.

A Signal is a reactive value that notifies dependents when it changes.

Example:

import { signal } from '@angular/core';

const count = signal(0);
count(); // 0
count.set(1);

Managing State via Dependency Injection

Create a StateService that holds signals.
Provide it at the component or root level.

@Injectable({ providedIn: 'root' })
export class CounterState {
  count = signal(0);

  increment() {
    this.count.update(c => c + 1);
  }
}

Scoped State with Component Providers

@Component({
  selector: 'app-parrent',
  providers: [CounterState],
  templateUrl: './parent.html'
})
export class ParentComponent {
  state = inject(CounterState);
}

Using the State in child Components

@Component({
  selector: 'app-child',
  template: `
    <button (click)="state.increment()">+</button>
    <p>Count: {{ state.count() }}</p>
  `
})
export class ChildComponent {
  state = inject(CounterState);
}

Best Practices

Keep services pure and focused on state logic.
Avoid too much global state.
Use computed for derived state.
Prefer DI scoping over manual signal creation in many components.

A complete example is here

Conclusion

The main benefits:

Reactive updates with zero boilerplate
Clean state isolation using DI
Easier debugging and reasoning

Next steps:

Try integrating Signals in existing projects
Explore computed() and effect() for advanced patterns

Happy coding!

I hope you found it helpful. Thanks for reading!
Let's get connected! You can find me on:

Medium: https://medium.com/@nhannguyenuri/
Dev: https://dev.to/nhannguyenuri/
LinkedIn: https://www.linkedin.com/in/nhannguyenuri/

Setup TailwindCSS v4 on Angular 19

Nhan Nguyen — Wed, 19 Feb 2025 15:17:33 +0000

TailwindCSS is a powerful utility-first CSS framework that enhances styling efficiency in modern web development. If you're working with Angular 19 and using SCSS, here's a step-by-step guide to upgrading and configuring TailwindCSS properly.

Step 1: Upgrade TailwindCSS

Run the following command to upgrade:

npx @tailwindcss/upgrade@next

Step 2: Install TailwindCSS and Required Dependencies

Now, install TailwindCSS and its necessary dependencies using npm. Run:

npm install tailwindcss @tailwindcss/postcss postcss --force

The --force flag ensures that all required dependencies are installed correctly, even if there are existing conflicts.

Step 3: Add PostCSS Configuration

Create a .postcssrc.json file in the root directory of your project and add the following configuration:

{
  "plugins": {
    "@tailwindcss/postcss": {}
  }
}

This file ensures that PostCSS processes TailwindCSS correctly.

Step 4: Create the TailwindCSS Entry File

Inside your src/ directory, create a new file called tailwind.css and add:

@import "tailwindcss";

This file serves as the main entry point for TailwindCSS styles.

Step 5: Update Your Global Styles File

Modify your global src/styles.scss file to include TailwindCSS by adding:

@use "./tailwind";

This ensures that SCSS processes TailwindCSS correctly and integrates it into your Angular project.

Step 6: Fix Tailwind IntelliSense in VS Code

If you are using the TailwindCSS IntelliSense extension in VS Code, and it’s not auto-completing class names, following this setup can help resolve the issue.

Adding Tailwind through @use in SCSS rather than @import aligns better with Angular's SCSS handling.

Final Thoughts

Following these steps, you can successfully upgrade TailwindCSS in your Angular 19 project while maintaining SCSS styling. This approach not only improves maintainability but also ensures smooth integration with Angular’s SCSS-based architecture.

Happy coding! 🚀

I hope you found it helpful. Thanks for reading. 🙏
Let's get connected! You can find me on:

Medium: https://medium.com/@nhannguyenuri/
Dev: https://dev.to/nhannguyenuri/
Linkedin: https://www.linkedin.com/in/nhannguyenuri/
X (formerly Twitter): https://twitter.com/nhannguyenuri/
Buy Me a Coffee: https://www.buymeacoffee.com/nhannguyenuri

Angular Dynamic Service Instantiation Using Injector

Nhan Nguyen — Thu, 23 Jan 2025 07:04:59 +0000

Dynamic service instantiation can be a powerful technique for creating flexible and scalable solutions in modern Angular applications. One use case is selecting a specific implementation of a service at runtime based on user input or application state. This post will explore how to achieve this using Angular's Injector and provide a practical example of dynamically initializing payment services.

The Problem

Imagine an application that supports multiple payment methods, such as PayPal, Stripe, and Venmo. Each payment method has its own implementation but adheres to a common interface. Based on the user's selection, the appropriate service needs to be instantiated dynamically at runtime. Angular's Injector provides a seamless way to accomplish this.

Example Setup

Below is a sample implementation of dynamic service instantiation:

Service Definitions

First, define a base class PaymentBaseService and create specific services for each payment method.

import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class PaymentBaseService {
  pay() {}
}

@Injectable({ providedIn: 'root' })
export class PaypalService extends PaymentBaseService {
  constructor() {
    super();
    console.log('PaypalService!');
  }

  override pay() {
    console.log('Paypal payment!');
  }
}

@Injectable({ providedIn: 'root' })
export class StripeService extends PaymentBaseService {
  constructor() {
    super();
    console.log('StripeService!');
  }

  override pay() {
    console.log('Stripe payment!');
  }
}

@Injectable({ providedIn: 'root' })
export class VenmoService extends PaymentBaseService {
  constructor() {
    super();
    console.log('VenmoService!');
  }

  override pay() {
    console.log('Venmo payment!');
  }
}

Component Implementation

Create a component where users can select a payment method and dynamically initialize the corresponding service:

import { Component, inject, Injector } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { bootstrapApplication } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  imports: [FormsModule],
  template: `
    <label for="payment">Choose a payment method:</label>
    <select name="payments" id='payments' [(ngModel)]="paymentMethod">
      <option value="">None</option>
      <option value="paypal">Paypal</option>
      <option value="stripe">Stripe</option>
      <option value="venmo">Venmo</option>
    </select>
    <br><br>
    <button (click)="updatePaymentService()">Submit</button>
  `,
})
export class App {
  readonly #injector = inject(Injector);

  paymentMethod: '' | 'paypal' | 'stripe' | 'venmo' = '';
  paymentService!: PaymentBaseService;

  updatePaymentService() {
    switch (this.paymentMethod) {
      case 'paypal':
        this.paymentService = this.#injector.get(PaypalService);
        break;
      case 'stripe':
        this.paymentService = this.#injector.get(StripeService);
        break;
      case 'venmo':
        this.paymentService = this.#injector.get(VenmoService);
        break;
      default:
        throw new Error(`Unknown payment type: ${this.paymentMethod}`);
    }

    this.paymentService.pay();
  }
}

bootstrapApplication(App);

Key Points

Injector Usage: The Injector fetches the appropriate service dynamically. This avoids directly injecting all possible services into the component, keeping the design clean and efficient.
Dynamic Initialization: The updatePaymentService method determines the selected payment type and initializes the corresponding service at runtime.
Error Handling: The implementation includes a fallback for unknown payment types, ensuring robustness.

Benefits of Using Injector

Scalability: Adding a new payment method requires only defining a new service and updating the switch case in the component.
Flexibility: Services are instantiated only when needed, reducing memory usage.
Clean Design: This approach adheres to the dependency inversion principle, ensuring a loosely coupled architecture.

Conclusion

Dynamic service instantiation using Angular's Injector is a powerful feature for building flexible and scalable applications. Following the example outlined above, you can easily implement runtime-based service selection. This approach is especially useful in scenarios where the application's behavior depends on user input or dynamic configurations.

Happy coding!

I hope you found it helpful. Thanks for reading. 🙏
Let's get connected! You can find me on:

Medium: https://medium.com/@nhannguyendevjs/
Dev: https://dev.to/nhannguyendevjs/
Linkedin: https://www.linkedin.com/in/nhannguyendevjs/
X (formerly Twitter): https://twitter.com/nhannguyendevjs/
Buy Me a Coffee: https://www.buymeacoffee.com/nhannguyendevjs

Deploying Your Angular v19 Site to Vercel

Nhan Nguyen — Tue, 21 Jan 2025 01:37:30 +0000

Vercel's free hosting platform provides an easy way to host your website. This guide focuses on deploying a personal Angular v19 site using only a vercel.json file for configuration.

1. Prepare Your Angular Project

Start by ensuring your Angular project is production-ready:

Run the following command to generate a production build:

ng build --configuration production

The build will output files to the dist/<project-name> directory.

2. Set Up a vercel.json File

The vercel.json file defines your Angular project's build and routing configurations. Create this file in the root of your project with the following content:

{
  "version": 2,
  "builds": [
    {
      "src": "package.json",
      "use": "@vercel/static-build",
      "config": {
        "distDir": "dist/<project-name>/browser"
      }
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "/index.html"
    }
  ]
}

Replace with the name of your Angular project as it appears in the dist directory.

3. Deploy Your Project

Push your Angular project to a Git repository (e.g., GitHub, GitLab, or Bitbucket).
Go to Vercel's website and log in.
Create a new project and link it to your repository.
Vercel will automatically detect and use the vercel.json file for the deployment configuration.
Once the deployment is complete, Vercel will provide a live URL for your application (e.g., https://your-project.vercel.app).

4. Sample Deployed Angular Site

Here is an example of my Angular site deployed to Vercel: angularcrosstabchat.vercel.app

Use this as inspiration for your deployment.

5. Handle Angular’s Routing

The vercel.json file ensures that all unknown routes are redirected to index.html, making Angular’s client-side routing work seamlessly. This is achieved with the routes configuration:

"routes": [
  {
    "src": "/(.*)",
    "dest": "/index.html"
  }
]

This setup ensures that your Angular Router handles the routing for all paths.

Conclusion

Leveraging the vercel.json file can simplify the deployment of your Angular v19 site to Vercel. This file handles build configurations and routing, ensuring a smooth deployment process. Once set up, your site will be live and ready to use with minimal effort!

I hope you found it helpful. Thanks for reading. 🙏
Let's get connected! You can find me on:

Medium: https://medium.com/@nhannguyendevjs/
Dev: https://dev.to/nhannguyendevjs/
Linkedin: https://www.linkedin.com/in/nhannguyendevjs/
X (formerly Twitter): https://twitter.com/nhannguyendevjs/
Buy Me a Coffee: https://www.buymeacoffee.com/nhannguyendevjs

Exploring Vitest 3.0: The Future of Testing in JavaScript

Nhan Nguyen — Mon, 20 Jan 2025 07:31:57 +0000

With the rapid evolution of JavaScript testing frameworks, developers are always looking for tools that simplify workflows, enhance performance, and offer robust features. Enter Vitest 3.0, the latest version of the popular testing framework designed to redefine how developers approach testing in modern JavaScript applications.

What is Vitest?

Vitest is a blazing-fast unit testing framework that seamlessly integrates with Vite, the modern build tool. Designed with speed and simplicity, Vitest leverages Vite's efficient bundling and hot module replacement (HMR) capabilities to deliver a testing experience that feels native to modern JavaScript development.

Key Features of Vitest 3.0

Vitest 3.0 brings many new features and improvements that make it stand out in the crowded landscape of testing frameworks. Here are some of the highlights:

1. Enhanced Performance

Performance has always been a core strength of Vitest, and version 3.0 takes it to the next level. Leveraging Vite’s optimized caching mechanisms and improved dependency tracking, Vitest 3.0 ensures tests run faster, even in large-scale projects.

2. Native Support for TypeScript

TypeScript is now a first-class citizen in Vitest 3.0. The framework offers out-of-the-box support for TypeScript, allowing developers to write tests in their preferred type-safe environment without additional configuration.

3. Improved Watch Mode

The new watch mode in Vitest 3.0 is smarter and more responsive. It can detect changes more accurately, ensuring only the relevant tests are re-executed. This significantly reduces development time when working on iterative updates.

4. Expanded Plugin Ecosystem

Vitest 3.0 introduces a richer plugin ecosystem, enabling developers to extend the framework's functionality effortlessly. The possibilities are vast, from custom matches to integration plugins.

5. Advanced Mocking Capabilities

Mocking dependencies has never been easier. Vitest 3.0 allows developers to mock modules dynamically with fine-grained control, making it ideal for testing complex applications with external integrations.

6. Snapshot Testing

Vitest 3.0 makes snapshot testing more powerful, with better tools for managing and updating snapshots. Developers can expect improved diffing capabilities and intuitive commands to maintain consistency.

7. Seamless CI/CD Integration

Vitest 3.0 recognizes the importance of continuous integration and has built-in support for popular CI/CD pipelines. Its lightweight nature ensures that test suites can run efficiently on cloud-based environments.

Why Choose Vitest 3.0?

With its focus on performance, developer experience, and modern JavaScript features, Vitest 3.0 is well-positioned to become the go-to testing framework for projects using Vite. Here are some reasons to consider adopting it:

Speed: By leveraging Vite’s efficient bundling, Vitest 3.0 runs lightning-speed tests.
Simplicity: Minimal configuration means you can get started quickly.
Flexibility: Vitest 3.0 supports everything, whether working with JavaScript, TypeScript, or JSX/TSX.
Community: Backed by an active community, there are numerous plugins, guides, and examples to help you.

Getting Started with Vitest 3.0

Ready to dive in? Here’s how you can get started:

Install Vitest:

npm install vitest --save-dev

Add a test script to your package.json:

{
  "scripts": {
    "test": "vitest"
  }
}

Write your first test:

Create a file named example.test.js:

import { describe, it, expect } from 'vitest';

describe('Basic Test Suite', () => {
  it('adds numbers correctly', () => {
    expect(1 + 1).toBe(2);
  });
});

Run your tests:

npm run test

Final Thoughts

Vitest 3.0 is more than just a testing framework; it’s a step forward in creating faster, more reliable, and developer-friendly workflows. With its seamless integration with Vite and modern JavaScript features, Vitest 3.0 is poised to become an indispensable tool for developers in 2025 and beyond.

Whether you’re building a new project or looking to upgrade your testing framework, Vitest 3.0 deserves a place in your toolkit. Try it today and experience the future of JavaScript testing firsthand.

I hope you found it helpful. Thanks for reading. 🙏
Let's get connected! You can find me on:

Medium: https://medium.com/@nhannguyendevjs/
Dev: https://dev.to/nhannguyendevjs/
Linkedin: https://www.linkedin.com/in/nhannguyendevjs/
X (formerly Twitter): https://twitter.com/nhannguyendevjs/
Buy Me a Coffee: https://www.buymeacoffee.com/nhannguyendevjs

Applying GraphQL to Backend with Node.js and PostgreSQL

Nhan Nguyen — Sun, 19 Jan 2025 01:30:43 +0000

What is GraphQL?

GraphQL is a query language for APIs and a runtime for executing those queries by using a type system you define for your data. It provides a more flexible and efficient alternative to REST APIs by enabling clients to request only the data they need, making it ideal for modern applications.

Key Features of GraphQL:

1. Single Endpoint: Instead of multiple endpoints, GraphQL uses a single endpoint to handle all queries and mutations.

2. Client-Defined Queries: Clients can specify exactly what data they need, reducing over-fetching or under-fetching.

3. Strongly Typed Schema: GraphQL APIs are defined by a schema that describes the types of data and relationships between them.

4. Real-Time Data: Supports subscriptions for real-time updates.

Here’s how to build a GraphQL API with Node.js and PostgreSQL:

1. Set Up Your Project:

Initialize a Node.js project:

mkdir graphql-node-postgres
cd graphql-node-postgres
npm init -y

Install dependencies:

npm install express graphql express-graphql pg prisma dotenv

2. Configure PostgreSQL

Create a PostgreSQL database.
Define your tables. Example SQL for a users table:

CREATE TABLE users (
  id SERIAL PRIMARY KEY,
  name VARCHAR(100),
  email VARCHAR(100) UNIQUE NOT NULL,
  age INT
);

3. Set Up Prisma (Optional for ORM)

Initialize Prisma:

npx prisma init

Update the prisma/schema.prisma file to define your data model:

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

generator client {
  provider = "prisma-client-js"
}

model User {
  id    Int    @id @default(autoincrement())
  name  String
  email String @unique
  age   Int
}

Migrate the schema to your database:

npx prisma migrate dev --name init

4. Build the GraphQL Schema

Define the GraphQL schema using graphql package:

const { GraphQLObjectType, GraphQLSchema, GraphQLString, GraphQLInt, GraphQLList, GraphQLNonNull } = require('graphql');
const { PrismaClient } = require('@prisma/client');
const prisma = new PrismaClient();

const UserType = new GraphQLObjectType({
  name: 'User',
  fields: {
    id: { type: GraphQLInt },
    name: { type: GraphQLString },
    email: { type: GraphQLString },
    age: { type: GraphQLInt },
  },
});

const RootQuery = new GraphQLObjectType({
  name: 'RootQueryType',
  fields: {
    users: {
      type: new GraphQLList(UserType),
      resolve: async () => await prisma.user.findMany(),
    },
    user: {
      type: UserType,
      args: { id: { type: GraphQLInt } },
      resolve: async (_, args) => await prisma.user.findUnique({ where: { id: args.id } }),
    },
  },
});

const Mutation = new GraphQLObjectType({
  name: 'Mutation',
  fields: {
    createUser: {
      type: UserType,
      args: {
        name: { type: new GraphQLNonNull(GraphQLString) },
        email: { type: new GraphQLNonNull(GraphQLString) },
        age: { type: GraphQLInt },
      },
      resolve: async (_, args) => {
        return await prisma.user.create({
          data: {
            name: args.name,
            email: args.email,
            age: args.age,
          },
        });
      },
    },
  },
});

const schema = new GraphQLSchema({
  query: RootQuery,
  mutation: Mutation,
});

module.exports = schema;

5. Set Up Express and GraphQL Middleware

Create an index.js file to run the server:

const express = require('express');
const { graphqlHTTP } = require('express-graphql');
const schema = require('./schema');
require('dotenv').config();

const app = express();

app.use('/graphql', graphqlHTTP({
  schema,
  graphiql: true, // Enable GraphiQL for testing
}));

const PORT = process.env.PORT || 4000;
app.listen(PORT, () => {
  console.log(`Server running on http://localhost:${PORT}/graphql`);
});

6. Run the Server

Start the server:

node index.js

Open http://localhost:4000/graphql to test your GraphQL API.

Example GraphQL Queries

Fetch all users:

query {
  users {
    id
    name
    email
    age
  }
}

Fetch a user by ID:

query {
  user(id: 1) {
    name
    email
  }
}

Create a new user:

mutation {
  createUser(name: "John Doe", email: "john@example.com", age: 30) {
    id
    name
    email
  }
}

I hope you found it helpful. Thanks for reading. 🙏
Let's get connected! You can find me on:

Medium: https://medium.com/@nhannguyendevjs/
Dev: https://dev.to/nhannguyendevjs/
Linkedin: https://www.linkedin.com/in/nhannguyendevjs/
X (formerly Twitter): https://twitter.com/nhannguyendevjs/
Buy Me a Coffee: https://www.buymeacoffee.com/nhannguyendevjs

Setting Up PostgreSQL in Docker: A Step-by-Step Guide

Nhan Nguyen — Sat, 18 Jan 2025 03:30:51 +0000

PostgreSQL is a powerful, open-source object-relational database system. Running PostgreSQL in a Docker container is an efficient way to set up and manage your database. This guide will walk you through setting up PostgreSQL in Docker, from installation to configuration.

Prerequisites

Before you begin, ensure that you have the following installed on your system:

1. Docker: You can download Docker from the official website.

2. Docker Compose (optional but recommended): This tool simplifies multi-container Docker setups.

3. Basic knowledge of the command line.

Step 1: Pull the PostgreSQL Docker Image

To get started, pull the official PostgreSQL Docker image from Docker Hub:

docker pull postgres

This command fetches the latest PostgreSQL image. If you need a specific version, specify it, like so:

docker pull postgres:15.3

Step 2: Run the PostgreSQL Container

Run a PostgreSQL container using the docker run command:

docker run --name postgres-container -e POSTGRES_USER=myuser -e POSTGRES_PASSWORD=mypassword -e POSTGRES_DB=mydatabase -p 5432:5432 -d postgres

Here’s a breakdown of the flags:

--name postgres-container: Names the container for easy reference.
-e POSTGRES_USER=myuser: Sets the PostgreSQL username.
-e POSTGRES_PASSWORD=mypassword: Sets the PostgreSQL password.
-e POSTGRES_DB=mydatabase: Creates a database named mydatabase.
-p 5432:5432: Maps port 5432 on your host to port 5432 in the container.
-d postgres: Runs the container in detached mode.

Step 3: Verify the Setup

To ensure the container is running:

docker ps

You should see your postgres-container in the list of running containers.

To connect to the database from your host machine, use a PostgreSQL client or a tool like psql. For example:

psql -h localhost -U myuser -d mydatabase

You’ll be prompted for the password you set earlier (mypassword).

Step 4: Persisting Data

By default, any data stored in the container will be lost if the container is removed. To persist data, you need to mount a volume:

docker run --name postgres-container -e POSTGRES_USER=myuser -e POSTGRES_PASSWORD=mypassword -e POSTGRES_DB=mydatabase -p 5432:5432 -v pgdata:/var/lib/postgresql/data -d postgres

Here, pgdata is a Docker volume that stores your database data on your host system. You can verify the volume is created with:

docker volume ls

Step 5: Using Docker Compose (Optional)

For more complex setups, such as defining multiple containers, use Docker Compose. Create a docker-compose.yml file:

version: '3.8'
services:
  postgres:
    image: postgres
    container_name: postgres-container
    environment:
      POSTGRES_USER: myuser
      POSTGRES_PASSWORD: mypassword
      POSTGRES_DB: mydatabase
    ports:
      - "5432:5432"
    volumes:
      - pgdata:/var/lib/postgresql/data
volumes:
  pgdata:

Start the container with:

docker-compose up -d

Step 6: Managing the PostgreSQL Container

Here are some useful commands for managing your PostgreSQL container:

Stop the container:

docker stop postgres-container

Start the container:

docker start postgres-container

Remove the container:

docker rm postgres-container

Step 7: Security and Best Practices

Use strong passwords: Avoid default or weak passwords.
Network isolation: Use Docker networks to limit access to the database container.
Backups: Regularly back up your database using tools like pg_dump.
Environment files: Store sensitive information in .env files instead of hardcoding them in docker-compose.yml.

Conclusion

Running PostgreSQL in Docker simplifies setup and management, making it easier to integrate into your development workflow. By following this guide, you’ll have a PostgreSQL instance running in no time. With Docker's flexibility, you can scale and configure your database to suit your needs. Happy coding!

I hope you found it helpful. Thanks for reading. 🙏
Let's get connected! You can find me on:

Medium: https://medium.com/@nhannguyendevjs/
Dev: https://dev.to/nhannguyendevjs/
Linkedin: https://www.linkedin.com/in/nhannguyendevjs/
X (formerly Twitter): https://twitter.com/nhannguyendevjs/
Buy Me a Coffee: https://www.buymeacoffee.com/nhannguyendevjs

Why You Should Consider Moving from MongoDB to PostgreSQL

Nhan Nguyen — Sat, 18 Jan 2025 03:17:12 +0000

MongoDB and PostgreSQL are popular database systems with strengths and ideal use cases. However, as your application grows and your requirements evolve, you may find that PostgreSQL offers distinct advantages over MongoDB. In this blog, we’ll explore why transitioning to PostgreSQL might be the right decision for your business.

1. Robust Data Integrity

One of PostgreSQL’s standout features is its adherence to the ACID (Atomicity, Consistency, Isolation, Durability) principles, ensuring robust data integrity. While MongoDB does support ACID transactions, its implementation is relatively new and may not match the maturity of PostgreSQL. This makes PostgreSQL a better choice for applications where data consistency and reliability are critical, such as financial systems or healthcare databases.

2. Advanced Query Capabilities

PostgreSQL’s SQL support is among the most advanced in the database world. It offers powerful features like:

Window functions
Common Table Expressions (CTEs)
Full-text search
Advanced indexing techniques (e.g., GIN, GiST, BRIN)

These features allow for more complex queries and efficient data retrieval, giving PostgreSQL a significant edge for analytical workloads.

3. Schema Evolution and Enforced Constraints

PostgreSQL combines flexibility with structure by supporting dynamic JSON data and enforced schema constraints. While MongoDB’s schemaless design is great for quick prototyping, it can lead to inconsistent data if not carefully managed. PostgreSQL allows you to define schemas with constraints (e.g., foreign keys, unique constraints), ensuring data quality without sacrificing the ability to store unstructured data via JSONB columns.

4. Performance at Scale

PostgreSQL is well-optimized for both read and write operations. It handles complex joins and aggregations efficiently, making it ideal for transactional and analytical workloads. With features like parallel query execution and indexing improvements, PostgreSQL can outperform MongoDB in scenarios involving large datasets and complex queries.

5. Built-in Extensions and Ecosystem

PostgreSQL boasts an extensive ecosystem of extensions that enhance its functionality. Popular extensions include:

PostGIS: Adds spatial and geographic data support.
pg_partman: Facilitates efficient partitioning for large tables.
TimescaleDB: Optimizes PostgreSQL for time-series data.

These extensions allow PostgreSQL to adapt to specialized use cases, something MongoDB may require additional tooling or workarounds to achieve.

6. Strong Community and Open-Source Credibility

PostgreSQL has a long-standing reputation as a reliable and truly open-source database. Its vibrant community actively contributes to its development, ensuring continual innovation and stability. MongoDB’s open-source status has been questioned following its licensing changes (SSPL), which may concern businesses seeking fully open solutions.

7. Cost Efficiency

For self-hosted deployments, PostgreSQL can often be more cost-effective than MongoDB. MongoDB’s architecture often leads to higher storage requirements due to data duplication in its document model. PostgreSQL’s relational model and advanced indexing options help reduce storage overhead and improve efficiency.

8. Compliance and Security

PostgreSQL provides advanced security features such as:

Role-based access control (RBAC)
Row-level security
Data encryption at rest and in transit

These features make it easier to comply with regulatory requirements like GDPR, HIPAA, and PCI-DSS. While MongoDB offers security features, PostgreSQL’s mature implementations and granular control options often make it the preferred choice for highly regulated industries.

9. Evolving Beyond NoSQL

MongoDB’s NoSQL design is a double-edged sword. While it’s great for certain use cases, the lack of enforced relationships can complicate application logic as the system grows. PostgreSQL’s hybrid capabilities—offering both relational and document-based storage—let you enjoy the best of both worlds without the pitfalls of an entirely schemaless system.

Conclusion

While MongoDB has its merits, PostgreSQL’s versatility, performance, and adherence to standards make it a superior choice for many applications. If your use case demands robust data integrity, advanced querying, or specialized features, moving to PostgreSQL can significantly benefit your application’s scalability and maintainability.

Transitioning from MongoDB to PostgreSQL might seem daunting, but the long-term benefits often outweigh the effort. With the right migration strategy and tools, you can leverage PostgreSQL’s full potential to future-proof your database infrastructure.

If you’re considering a migration or want to learn more about how PostgreSQL can meet your needs, feel free to reach out or explore the extensive resources available within the PostgreSQL community.

I hope you found it helpful. Thanks for reading. 🙏
Let's get connected! You can find me on:

Medium: https://medium.com/@nhannguyendevjs/
Dev: https://dev.to/nhannguyendevjs/
Linkedin: https://www.linkedin.com/in/nhannguyendevjs/
X (formerly Twitter): https://twitter.com/nhannguyendevjs/
Buy Me a Coffee: https://www.buymeacoffee.com/nhannguyendevjs

Getting Started with PostgreSQL: A Beginner's Guide

Nhan Nguyen — Sat, 18 Jan 2025 03:01:41 +0000

PostgreSQL, often referred to as Postgres, is one of the most popular open-source relational database management systems (RDBMS) worldwide. Known for its robustness, extensibility, and standards compliance, it’s an excellent choice for developers and businesses. This guide will help you set up and get started with PostgreSQL.

Why Choose PostgreSQL?

Before diving into the technical setup, let’s explore why PostgreSQL might be the correct database for your needs:

Open Source: It’s free to use and has a vibrant community that continuously enhances its features.
Cross-Platform: Runs on all major operating systems like Linux, Windows, and macOS.
Feature-Rich: Supports advanced features like JSON/JSONB, full-text search, and advanced indexing techniques.
Standards-Compliant: Adheres to the SQL standard while offering additional functionalities.

Installing PostgreSQL

1. Installation on Linux

Ubuntu/Debian

sudo apt update
sudo apt install postgresql postgresql-contrib

Fedora/CentOS

sudo dnf install postgresql-server postgresql-contrib
sudo postgresql-setup --initdb
sudo systemctl start postgresql
sudo systemctl enable PostgreSQL

2. Installation on macOS

brew update
brew install postgresql
brew services start PostgreSQL

3. Installation on Windows

Download the installer from PostgreSQL Downloads.
Run the installer and follow the wizard steps.

Setting Up PostgreSQL

Once PostgreSQL is installed, follow these steps to configure it:

1. Access the PostgreSQL Command-Line Interface (CLI)

PostgreSQL ships with a powerful command-line tool called psql.

To start psql:

sudo -i -u postgres
psql

2. Create a New User and Database

To create a new user and database:

CREATE USER myuser WITH PASSWORD 'mypassword';
CREATE DATABASE mydb;
GRANT ALL PRIVILEGES ON DATABASE mydb TO myuser;

3. Connect to Your Database

Exit psql and reconnect using your new user:

psql -U myuser -d mydb -W

Basic Commands

Here are some essential PostgreSQL commands to get you started:

List all databases:

\l

Switch to a database:

\c mydb

List all tables:

\dt

Create a table:

CREATE TABLE users (
    id SERIAL PRIMARY KEY,
    name VARCHAR(100),
    email VARCHAR(100) UNIQUE,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

Insert data into a table:

INSERT INTO users (name, email) VALUES ('Alice', 'alice@example.com');

Retrieve data from a table:

SELECT * FROM users;

Using PostgreSQL with Applications

PostgreSQL can be integrated with various programming languages and frameworks. Popular libraries include:

Python: Use psycopg2 or SQLAlchemy.
Node.js: Use pg.
Java: Use JDBC.
Ruby: Use ActiveRecord.

For example, connecting to PostgreSQL in Python using psycopg2:

import psycopg2

conn = psycopg2.connect(
    dbname="mydb",
    user="myuser",
    password="mypassword",
    host="localhost"
)
cursor = conn.cursor()
cursor.execute("SELECT * FROM users;")
print(cursor.fetchall())
conn.close()

Tips for Beginners

Use a GUI Tool: Tools like pgAdmin, DBeaver, or DataGrip make it easier to visualize and manage your database.
Read the Documentation: PostgreSQL has extensive documentation.
Practice SQL: Familiarize yourself with SQL commands to get the most out of PostgreSQL.
Backup Regularly: Use pg_dump or pg_basebackup for backups.

Conclusion

PostgreSQL is a powerful and versatile database system that can handle everything from small projects to enterprise-scale applications. This guide will give you a solid foundation for exploring its capabilities further. Happy coding!

I hope you found it helpful. Thanks for reading. 🙏
Let's get connected! You can find me on:

Medium: https://medium.com/@nhannguyendevjs/
Dev: https://dev.to/nhannguyendevjs/
Linkedin: https://www.linkedin.com/in/nhannguyendevjs/
X (formerly Twitter): https://twitter.com/nhannguyendevjs/
Buy Me a Coffee: https://www.buymeacoffee.com/nhannguyendevjs

Getting Started with Supabase

Nhan Nguyen — Sat, 18 Jan 2025 02:01:44 +0000

If you're new to building web or mobile applications and looking for an easy way to handle your backend, Supabase is a platform you’ll want to explore. Often called an "open-source Firebase alternative," Supabase offers a simple yet powerful suite of tools for database management, authentication, and real-time communication—without the need to build everything from scratch.

This guide will explain the basics of Supabase and how to get started, even if you’re a beginner.

What is Supabase?

Supabase is an open-source backend-as-a-service (BaaS) that provides developers with:

1. Database Management: A PostgreSQL database that’s powerful and scalable.

2. Authentication: Easy-to-set-up user authentication with providers like Google, GitHub, and more.

3. Real-Time Features: Listen to database changes in real-time.

4. Storage: Manage and serve files such as images and videos.

5. Edge Functions: Serverless functions for custom backend logic.

The best part? Supabase is open-source, so you can self-host it if you want full control.

Why Choose Supabase?

Supabase stands out for a few reasons:

Simplicity: You don’t need extensive backend knowledge to get started.
Open-Source: Unlike proprietary platforms, you’re not locked into Supabase’s ecosystem.
Scalable: As your app grows, so does your backend.
Community-Driven: Being open-source means there's a vibrant community ready to help.

How to Get Started with Supabase

Let’s break it down step-by-step:

1. Create a Supabase Account

Go to Supabase and create a free account. Once you’re signed in, you’ll land on the dashboard where you can create your first project.

2. Set Up Your Project

Click on "New Project".
Enter a name, select a region, and create a strong password for your database.
Once your project is ready, you’ll get access to a PostgreSQL database.

3. Explore the Supabase Dashboard

The dashboard provides a user-friendly interface to:

Manage your database tables.
Set up authentication providers.
Create storage buckets for file management.
Monitor real-time logs and events.

4. Use Supabase Client in Your Application

To connect your application to Supabase, you need the Supabase JavaScript client:

Install the client:

npm install @supabase/supabase-js

Initialize it in your project:

import { createClient } from '@supabase/supabase-js';

const supabaseUrl = 'https://your-project.supabase.co';
const supabaseKey = 'your-anon-key';
const supabase = createClient(supabaseUrl, supabaseKey);

Use the client to interact with your backend:

const { data, error } = await supabase
  .from('your_table_name')
  .select('*');

console.log(data);

5. Add Authentication

Supabase makes it easy to add authentication to your app:

Enable providers (e.g., Google, GitHub) in the dashboard.
Use the Supabase client to sign users in:

const { user, error } = await supabase.auth.signInWithOAuth({
  provider: 'google'
});

Manage logged-in users with supabase.auth methods.

6. Leverage Real-Time Features

Want real-time updates in your app? Supabase has you covered:

const mySubscription = supabase
  .from('your_table_name')
  .on('INSERT', payload => {
    console.log('New record:', payload.new);
  })
  .subscribe();

// To unsubscribe:
mySubscription.unsubscribe();

Tips for Newbies

Start Small: Begin with a single feature, like authentication or a basic database query.
Use the Docs: Supabase’s documentation is beginner-friendly and packed with examples.
Experiment: The free tier is generous—use it to experiment and learn.
Join the Community: Connect with other developers on forums, Discord, or GitHub.

Conclusion

Supabase is an excellent choice for developers who want a quick, scalable, and easy-to-use backend. Whether you’re building a side project, launching a startup, or learning to code, Supabase simplifies the backend so you can focus on creating amazing applications.

Ready to dive in? Head over to Supabase and start building today!

I hope you found it helpful. Thanks for reading. 🙏
Let's get connected! You can find me on:

Medium: https://medium.com/@nhannguyendevjs/
Dev: https://dev.to/nhannguyendevjs/
Linkedin: https://www.linkedin.com/in/nhannguyendevjs/
X (formerly Twitter): https://twitter.com/nhannguyendevjs/
Buy Me a Coffee: https://www.buymeacoffee.com/nhannguyendevjs

DEV Community: Nhan Nguyen

Conditional Validation in Angular 21 Signal Forms: `when` vs `applyWhen`

The when Property: Single Rule Conditions

The applyWhen Function: Multiple Rule Conditions

When to Use Which?

The Bottom Line

Building a Reactive Login Form with Angular Signal Forms

Modern Angular State Management with Signals and Dependency Injection

Setup TailwindCSS v4 on Angular 19

Step 1: Upgrade TailwindCSS

Step 2: Install TailwindCSS and Required Dependencies

Step 3: Add PostCSS Configuration

Step 4: Create the TailwindCSS Entry File

Step 6: Fix Tailwind IntelliSense in VS Code

Final Thoughts

Angular Dynamic Service Instantiation Using Injector

The Problem

Example Setup

Service Definitions

Component Implementation

Key Points

Benefits of Using Injector

Conclusion

Deploying Your Angular v19 Site to Vercel

Conclusion

Exploring Vitest 3.0: The Future of Testing in JavaScript

What is Vitest?

Key Features of Vitest 3.0

Why Choose Vitest 3.0?

Getting Started with Vitest 3.0

Final Thoughts

Applying GraphQL to Backend with Node.js and PostgreSQL

What is GraphQL?

Here’s how to build a GraphQL API with Node.js and PostgreSQL:

Example GraphQL Queries

Setting Up PostgreSQL in Docker: A Step-by-Step Guide

Prerequisites

Step 1: Pull the PostgreSQL Docker Image

Step 2: Run the PostgreSQL Container

Step 3: Verify the Setup

Step 4: Persisting Data

Step 5: Using Docker Compose (Optional)

Step 6: Managing the PostgreSQL Container

Step 7: Security and Best Practices

Conclusion

Why You Should Consider Moving from MongoDB to PostgreSQL

Conclusion

Getting Started with PostgreSQL: A Beginner's Guide

Why Choose PostgreSQL?

Installing PostgreSQL

Setting Up PostgreSQL

Basic Commands

Using PostgreSQL with Applications

Tips for Beginners

Conclusion

Getting Started with Supabase

What is Supabase?

Why Choose Supabase?

How to Get Started with Supabase

Tips for Newbies

Conclusion

The `when` Property: Single Rule Conditions

The `applyWhen` Function: Multiple Rule Conditions