Ddd Feature

DDD Feature Creation Guide

Create new domain features following the project's Domain-Driven Design structure.

Domain Structure

src/app/
  <domain>/                    # Business domain (tasks, user, order, etc.)
    feature/                   # Feature/container components
      <feature-name>/
        <feature-name>.ts
        <feature-name>.html
        <feature-name>.scss
        <feature-name>.spec.ts
    ui/                        # Presentational components
      <component-name>/
        <component-name>.ts
        ...
    data/                      # Data access layer
      models/
        <domain>.model.ts      # Domain models/interfaces
      infrastructure/
        <domain>.ts            # API service
      state/
        <domain>-store.ts      # NgRx Signals Store
    util/                      # Domain utilities
      <util-name>/
        <util-name>.ts

Step-by-Step Feature Creation

1. Create Domain Model

src/app/tasks/data/models/task.model.ts:

export interface Task {
  id: string;
  title: string;
  description: string;
  completed: boolean;
  priority: "low" | "medium" | "high";
  dueDate: string | null;
  createdAt: string;
  updatedAt: string;
}

export type CreateTaskDto = Omit<Task, "id" | "createdAt" | "updatedAt">;
export type UpdateTaskDto = Partial<CreateTaskDto>;

2. Create Infrastructure Service

src/app/tasks/data/infrastructure/task.ts:

import { inject, Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { Observable } from "rxjs";

import { Task, CreateTaskDto, UpdateTaskDto } from "../models/task.model";

@Injectable({ providedIn: "root" })
export class TaskInfrastructure {
  private readonly http = inject(HttpClient);
  private readonly baseUrl = "http://localhost:3000/tasks";

  getTasks(): Observable<Task[]> {
    return this.http.get<Task[]>(this.baseUrl);
  }

  getTaskById(id: string): Observable<Task> {
    return this.http.get<Task>(`${this.baseUrl}/${id}`);
  }

  createTask(task: CreateTaskDto): Observable<Task> {
    return this.http.post<Task>(this.baseUrl, task);
  }

  updateTask(id: string, changes: UpdateTaskDto): Observable<Task> {
    return this.http.patch<Task>(`${this.baseUrl}/${id}`, changes);
  }

  deleteTask(id: string): Observable<void> {
    return this.http.delete<void>(`${this.baseUrl}/${id}`);
  }
}

3. Create Signal Store

src/app/tasks/data/state/task-store.ts:

import { computed, inject } from "@angular/core";
import {
  signalStore,
  withState,
  withComputed,
  withMethods,
  patchState,
  type,
} from "@ngrx/signals";
import {
  withEntities,
  entityConfig,
  addEntity,
  updateEntity,
  removeEntity,
  setAllEntities,
} from "@ngrx/signals/entities";
import { rxMethod } from "@ngrx/signals/rxjs-interop";
import { tapResponse } from "@ngrx/operators";
import { pipe, switchMap } from "rxjs";

import { TaskInfrastructure } from "../infrastructure/task";
import { Task, CreateTaskDto, UpdateTaskDto } from "../models/task.model";

export interface TaskState {
  selectedTaskId: string | null;
  loading: boolean;
  error: string | null;
}

const initialState: TaskState = {
  selectedTaskId: null,
  loading: false,
  error: null,
};

const taskEntityConfig = entityConfig({
  entity: type<Task>(),
  collection: "tasks",
  selectId: (task: Task) => task.id,
});

export const TaskStore = signalStore(
  { providedIn: "root" },
  withState(initialState),
  withEntities(taskEntityConfig),

  withComputed(({ tasksEntities, tasksEntityMap, selectedTaskId }) => ({
    selectedTask: computed(() => {
      const id = selectedTaskId();
      return id ? tasksEntityMap()[id] : undefined;
    }),
    taskCount: computed(() => tasksEntities().length),
  })),

  withMethods((store, taskService = inject(TaskInfrastructure)) => ({
    selectTask(id: string | null): void {
      patchState(store, { selectedTaskId: id });
    },

    loadTasks: rxMethod<void>(
      pipe(
        switchMap(() => {
          patchState(store, { loading: true, error: null });
          return taskService.getTasks().pipe(
            tapResponse({
              next: (tasks) =>
                patchState(store, setAllEntities(tasks, taskEntityConfig), {
                  loading: false,
                }),
              error: (error: Error) =>
                patchState(store, {
                  loading: false,
                  error: error.message,
                }),
            }),
          );
        }),
      ),
    ),

    createTask: rxMethod<CreateTaskDto>(
      pipe(
        switchMap((dto) => {
          patchState(store, { loading: true });
          return taskService.createTask(dto).pipe(
            tapResponse({
              next: (task) =>
                patchState(store, addEntity(task, taskEntityConfig), {
                  loading: false,
                }),
              error: () => patchState(store, { loading: false }),
            }),
          );
        }),
      ),
    ),

    updateTask: rxMethod<{ id: string; changes: UpdateTaskDto }>(
      pipe(
        switchMap(({ id, changes }) => {
          return taskService.updateTask(id, changes).pipe(
            tapResponse({
              next: (task) =>
                patchState(
                  store,
                  updateEntity({ id, changes: task }, taskEntityConfig),
                ),
              error: () => console.error("Update failed"),
            }),
          );
        }),
      ),
    ),

    deleteTask: rxMethod<string>(
      pipe(
        switchMap((id) => {
          return taskService.deleteTask(id).pipe(
            tapResponse({
              next: () => patchState(store, removeEntity(id, taskEntityConfig)),
              error: () => console.error("Delete failed"),
            }),
          );
        }),
      ),
    ),
  })),
);

4. Create UI Component (Presentational)

src/app/tasks/ui/task-item/task-item.ts:

import {
  ChangeDetectionStrategy,
  Component,
  input,
  output,
} from "@angular/core";
import { MatCardModule } from "@angular/material/card";
import { MatCheckboxModule } from "@angular/material/checkbox";
import { MatIconModule } from "@angular/material/icon";
import { MatButtonModule } from "@angular/material/button";

import { Task } from "../../data/models/task.model";

@Component({
  selector: "app-task-item",
  templateUrl: "./task-item.html",
  styleUrl: "./task-item.scss",
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [MatCardModule, MatCheckboxModule, MatIconModule, MatButtonModule],
})
export class TaskItem {
  readonly task = input.required<Task>();

  readonly toggle = output<boolean>();
  readonly delete = output<void>();
  readonly edit = output<void>();

  onToggle(completed: boolean): void {
    this.toggle.emit(completed);
  }

  onDelete(): void {
    this.delete.emit();
  }

  onEdit(): void {
    this.edit.emit();
  }
}

5. Create Feature Component (Container)

src/app/tasks/feature/task-list/task-list.ts:

import {
  ChangeDetectionStrategy,
  Component,
  inject,
  OnInit,
} from "@angular/core";
import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";

import { TaskStore } from "../../data/state/task-store";
import { TaskItemComponent } from "../../ui/task-item/task-item";

@Component({
  selector: "app-task-list",
  templateUrl: "./task-list.html",
  styleUrl: "./task-list.scss",
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [MatProgressSpinnerModule, TaskItem],
})
export class TaskList implements OnInit {
  readonly taskStore = inject(TaskStore);

  ngOnInit(): void {
    this.taskStore.loadTasks();
  }

  onToggleTask(taskId: string, completed: boolean): void {
    this.taskStore.updateTask({ id: taskId, changes: { completed } });
  }

  onDeleteTask(taskId: string): void {
    this.taskStore.deleteTask(taskId);
  }
}

6. Create Routes

src/app/tasks/feature/tasks.routes.ts:

import { Routes } from "@angular/router";

export const TASK_ROUTES: Routes = [
  {
    path: "",
    loadComponent: () =>
      import("./task-list/task-list").then((m) => m.TaskListComponent),
  },
  {
    path: ":id",
    loadComponent: () =>
      import("./task-detail/task-detail").then((m) => m.TaskDetailComponent),
  },
];

Important Rules

1. No Barrel Files: Do NOT create index.ts files for re-exporting
2. Component Subfolders: Each component MUST be in its own subfolder
3. Separation of Concerns:
   • feature/ = Container components (smart, connected to store)
   • ui/ = Presentational components (dumb, input/output only)
   • data/ = State, models, and API services
4. Naming Conventions:
   • Files: kebab-case.ts (e.g., task-list.ts) - no type suffix
   • Stores: kebab-case-store.ts (e.g., task-store.ts) - dash separator
   • Classes: PascalCase (e.g., TaskListComponent)
   • Models: kebab-case.model.ts (e.g., task.model.ts) - keep .model suffix

Checklist for New Feature

• Domain model created in data/models/
• Infrastructure service created in data/infrastructure/
• Signal store created in data/state/
• UI components created in ui/ (each in own subfolder)
• Feature components created in feature/ (each in own subfolder)
• Routes defined with lazy loading
• All components using OnPush change detection
• Tests created for components, store, and service
• No barrel files (index.ts) created