Angular Introduction To Ngrx Complete Guide

Step 1: Set up an Angular Project

First, make sure you have Angular CLI installed. If not, install it using:

npm install -g @angular/cli

Create a new Angular project:

ng new ngrx-intro --routing=false
cd ngrx-intro

Step 2: Install NgRx

Install NgRx using the Angular CLI schematic:

ng add @ngrx/store
ng add @ngrx/store-devtools
ng add @ngrx/effects

This will install the necessary NgRx packages and configurations.

Step 3: Generate NgRx Artifacts

3.1. Define the Task Model

Create a task.model.ts in a models folder under src/app:

// src/app/models/task.model.ts
export interface Task {
  id: number;
  title: string;
  completed: boolean;
}

3.2. Generate Actions

Create actions for adding, removing, and toggling tasks:

ng generate action actions/task --group

Edit the generated actions file:

// src/app/actions/task.actions.ts
import { createAction, props } from '@ngrx/store';
import { Task } from '../models/task.model';

export const addTask = createAction(
  '[Task] Add Task',
  props<{ task: Task }>()
);

export const removeTask = createAction(
  '[Task] Remove Task',
  props<{ id: number }>()
);

export const toggleTask = createAction(
  '[Task] Toggle Task',
  props<{ id: number }>()
);

3.3. Generate Reducers

Create a reducer to handle the task actions:

ng generate reducer reducers/task --group

Edit the generated reducer file:

// src/app/reducers/task.reducer.ts
import { createReducer, on } from '@ngrx/store';
import { Task } from '../models/task.model';
import { addTask, removeTask, toggleTask } from '../actions/task.actions';

export const initialState: Task[] = [];

export const taskReducer = createReducer(
  initialState,
  on(addTask, (state, { task }) => [...state, task]),
  on(removeTask, (state, { id }) => state.filter(task => task.id !== id)),
  on(toggleTask, (state, { id }) => state.map(task => task.id === id ? { ...task, completed: !task.completed } : task))
);

3.4. Add Reducer to Store Configuration

Edit app.module.ts to include the NgRx StoreModule and register your reducer:

// src/app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { StoreModule } from '@ngrx/store';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { environment } from '../environments/environment';
import { taskReducer } from './reducers/task.reducer';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    StoreModule.forRoot({ tasks: taskReducer }),
    StoreDevtoolsModule.instrument({ maxAge: 25, logOnly: environment.production })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Step 4: Create the Task Manager Component

Create a component to manage and display tasks:

ng generate component components/task-manager

Edit the task-manager.component.ts:

// src/app/components/task-manager/task-manager.component.ts
import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs';
import { Task } from '../../models/task.model';
import { addTask, removeTask, toggleTask } from '../../actions/task.actions';

@Component({
  selector: 'app-task-manager',
  templateUrl: './task-manager.component.html',
  styleUrls: ['./task-manager.component.css']
})
export class TaskManagerComponent {
  tasks$: Observable<Task[]>;
  newTaskTitle: string = '';
  lastId: number = 0;

  constructor(private store: Store<{ tasks: Task[] }>) {
    this.tasks$ = store.select('tasks');
  }

  addTask() {
    if (this.newTaskTitle.trim()) {
      const task: Task = { id: this.lastId++, title: this.newTaskTitle, completed: false };
      this.store.dispatch(addTask({ task }));
      this.newTaskTitle = '';
    }
  }

  removeTask(id: number) {
    this.store.dispatch(removeTask({ id }));
  }

  toggleTask(id: number) {
    this.store.dispatch(toggleTask({ id }));
  }
}

Edit the task-manager.component.html:

<!-- src/app/components/task-manager/task-manager.component.html -->
<div>
  <h2>Task Manager</h2>
  <input [(ngModel)]="newTaskTitle" placeholder="Add a new task" />
  <button (click)="addTask()">Add Task</button>
  <ul>
    <li *ngFor="let task of tasks$ | async">
      <input type="checkbox" [(ngModel)]="task.completed" (change)="toggleTask(task.id)" />
      <span [class.completed]="task.completed">{{ task.title }}</span>
      <button (click)="removeTask(task.id)">Remove</button>
    </li>
  </ul>
</div>

Edit the task-manager.component.css:

/* src/app/components/task-manager/task-manager.component.css */
.completed {
  text-decoration: line-through;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: flex;
  align-items: center;
}

input[type="checkbox"] {
  margin-right: 8px;
}

Step 5: Update App Component

Include the task manager component in the main app component:

<!-- src/app/app.component.html -->
<app-task-manager></app-task-manager>

Step 6: Include FormsModule

To allow two-way data binding with ngModel, make sure to include FormsModule in app.module.ts:

// src/app/app.module.ts
import { FormsModule } from '@angular/forms';

...

@NgModule({
  ...
  imports: [
    ...
    FormsModule,
    ...
  ],
  ...
})

Step 7: Run the Application

Finally, run the application to see the NgRx magic in action:

ng serve

Navigate to http://localhost:4200/ in your browser, and you should see a simple task manager application managed by NgRx.