Congratulations on making it this far! You’ve learned about the most impactful new features in Angular v21. Now, it’s time to consolidate that knowledge by building a practical application. This project will integrate many of the concepts we’ve covered, giving you hands-on experience in a real-world context.

Project Goal: Simple User Management Application

We will build a basic User Management Application. This application will:

  1. Display a list of users.
  2. Allow adding new users.
  3. Provide basic user details.
  4. Be built entirely with standalone components and services.
  5. Leverage signals for state management wherever possible.
  6. Operate in a zoneless change detection environment for optimal performance.
  7. Utilize the HttpClient (by default) for API communication.
  8. Potentially integrate Signal Forms (if they progress to a more stable state, or as an experimental exercise).

Why This Project?

This project is chosen because it naturally lends itself to demonstrating:

  • Zoneless Change Detection: By working with signals and HttpClient, you’ll implicitly experience the benefits of zoneless.
  • Signals for State Management: Users, loading states, and error messages are perfect candidates for signals.
  • HttpClient (by default): Every user management app needs to talk to a backend to fetch, add, and update users.
  • Standalone Components: We’ll build modular components without NgModules.
  • New Control Flow: We’ll use @if, @for, @switch for conditional rendering and lists.

Tools and Technologies We’ll Use

  • Angular v21+: The core framework.
  • Angular CLI: For scaffolding and building.
  • TypeScript: For type-safe JavaScript.
  • Signals: For reactive state management.
  • HttpClient: For API interactions.
  • (Optional) JSON Server: A simple way to set up a mock REST API locally for development, so we don’t need a real backend.

Project Setup: Initializing the Application

Let’s start by creating a new Angular v21 project.

  1. Create a New Angular Project: Open your terminal and run:

    ng new user-management-app --standalone --routing --strict
cd user-management-app

    This creates a new Angular v21 standalone application, which by default will be zoneless and use esbuild for its build process.

  2. Install JSON Server (Optional but Recommended for Backend Simulation): To simulate a backend API, we’ll use json-server. This allows us to quickly create a REST API from a JSON file.

    npm install -D json-server

  3. Create a db.json file for your mock data: In the root of your user-management-app project (or in a server/ directory, for example), create a file named db.json with some initial user data:

    // db.json
{
  "users": [
    { "id": 1, "name": "Alice Smith", "email": "[email protected]", "role": "admin" },
    { "id": 2, "name": "Bob Johnson", "email": "[email protected]", "role": "user" },
    { "id": 3, "name": "Charlie Brown", "email": "[email protected]", "role": "user" }
  ]
}

  4. Add a script to package.json to run JSON Server: Open package.json and add a new script under "scripts":

    // package.json (snippet)
"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "watch": "ng build --watch --configuration development",
  "test": "ng test",
  "serve:json-api": "json-server --watch db.json --port 3000" // Add this line
},

    Now you can run your mock API with npm run serve:json-api.

  5. Test the JSON Server: Run npm run serve:json-api in one terminal. Open your browser to http://localhost:3000/users. You should see your mock user data.

Project Structure (High-Level Plan)

Here’s how we’ll structure our application, leveraging standalone components:

  • src/app/app.component.ts: The root component, primarily for layout and routing.
  • src/app/shared/: Common interfaces and perhaps a utility service.
    • src/app/shared/models/user.interface.ts
  • src/app/core/: Core application services (e.g., UserService).
    • src/app/core/services/user.service.ts
  • src/app/features/users/: Feature-specific components related to user management.
    • src/app/features/users/components/user-list/user-list.component.ts
    • src/app/features/users/components/user-form/user-form.component.ts
    • src/app/features/users/pages/users-page/users-page.component.ts (a routing host component)

Outline of Project Chapters

This project will span multiple “chapters” to guide you incrementally:

  • Chapter 15.1: Defining User Model and Service: Create the User interface and UserService for API interaction.
  • Chapter 15.2: Displaying User List: Implement UserListComponent and integrate it into UsersPageComponent.
  • Chapter 15.3: Adding New Users with Signal Forms: Create UserFormComponent to add new users, leveraging Signal Forms (experimentally).
  • Chapter 15.4: Integrating and Routing: Set up routes for the user features and integrate the components.
  • Chapter 15.5: Basic Error Handling and Loading States: Enhance the app with signals for loading and error feedback.
  • Chapter 15.6: Testing Core Components and Services (with Vitest): Write unit tests for our UserService and UserListComponent.

Mini-Challenge: Review app.config.ts

Before we proceed, open your new project’s src/app/app.config.ts file.

  1. Do you see provideExperimentalZonelessChangeDetection() or provideZoneChangeDetection() explicitly added?
  2. What about provideHttpClient()?

Reflect on what we learned about Angular v21 defaults. This exercise helps confirm your project’s foundational setup.

Summary/Key Takeaways

  • The project will be a User Management Application, built with Angular v21’s modern features: standalone components, signals, zoneless change detection, and HttpClient.
  • We’ve initiated the project by creating a new Angular CLI app and setting up json-server for a mock backend.
  • The project will follow a structured approach, building features incrementally across dedicated chapters.

Get ready to apply your newfound Angular v21 knowledge and build a functional application! In the next sub-chapter, we’ll start by defining our user data model and creating the service to interact with our mock API.