Use when creating new domain features or adding new business capabilities. Triggers on requests to "create feature", "add new domain", "new module", "scaffold feature", or when implementing complete business features.
Create new domain features following the project's Domain-Driven Design 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
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>;
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}`);
}
}
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"),
}),
);
}),
),
),
})),
);
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();
}
}
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);
}
}
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),
},
];
index.ts files for re-exportingfeature/ = Container components (smart, connected to store)ui/ = Presentational components (dumb, input/output only)data/ = State, models, and API serviceskebab-case.ts (e.g., task-list.ts) - no type suffixkebab-case-store.ts (e.g., task-store.ts) - dash separatorPascalCase (e.g., TaskListComponent)kebab-case.model.ts (e.g., task.model.ts) - keep .model suffixdata/models/data/infrastructure/data/state/ui/ (each in own subfolder)feature/ (each in own subfolder)