Migrate to Ngrx Singal Store

package.json

@@ -22,6 +22,7 @@
     "@angular/platform-browser": "18.2.5",
     "@angular/platform-browser-dynamic": "18.2.5",
     "@angular/router": "18.2.5",
+    "@ngrx/signals": "^18.0.2",
     "rxjs": "7.5.0",
     "tslib": "2.3.0",
     "zone.js": "0.14.10"
@@ -49,4 +50,4 @@
     "karma-jasmine-html-reporter": "1.7.0",
     "typescript": "5.4.5"
   }
-}
+}

src/app/components/clear-btn/clear-btn.component.html

@@ -1,11 +1,13 @@
-@if (completedTodos$ | async; as todos) {
-  @if (todos.length > 0) {
+@let completedTodos = store.completedTodos();
+
+
+  @if (completedTodos.length > 0) {
     <button
       type="button"
-      (click)="clear()"
+      (click)="store.clearCompleted()"
       class="clear-completed"
       >
       Clear completed
     </button>
   }
-}
+

src/app/components/clear-btn/clear-btn.component.ts

@@ -1,23 +1,13 @@
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
-import { AsyncPipe } from '@angular/common';
 
-import { TodoService } from '@services/todo.service';
+import { TodosStore } from '@services/todos.store';
 
 @Component({
   standalone: true,
-  imports: [AsyncPipe],
   selector: 'app-clear-btn',
   templateUrl: './clear-btn.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ClearBtnComponent {
-  private todoService = inject(TodoService);
-
-
-  completedTodos$ = this.todoService.getCompletedTodos();
-
-  clear() {
-    this.todoService.clearCompleted();
-  }
-
+  readonly store = inject(TodosStore);
 }

src/app/components/counter/counter.component.html

@@ -1,11 +1,12 @@
-@if (pendingTodos$ | async; as pendingTodos) {
-  <span class="todo-count">
-    <strong>{{ pendingTodos.length }} </strong>
-    @if (pendingTodos.length === 1) {
-      <span>item </span>
-    } @else {
-      items
-    }
-    left
-  </span>
-}
+@let pendingTodos = store.pendingTodos();
+
+<span class="todo-count">
+  <strong>{{ pendingTodos.length }} </strong>
+  @if (pendingTodos.length === 1) {
+    <span>item </span>
+  } @else {
+    items
+  }
+  left
+</span>
+

src/app/components/counter/counter.component.ts

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { AsyncPipe } from '@angular/common';
 
-import { TodoService } from '@services/todo.service';
+import { TodosStore } from '@services/todos.store';
 
 @Component({
   standalone: true,
@@ -11,9 +11,5 @@ import { TodoService } from '@services/todo.service';
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class CounterComponent{
-  private todoService = inject(TodoService);
-
-
-  pendingTodos$ = this.todoService.getPendingTodos();
-
+  readonly store = inject(TodosStore);
 }

src/app/components/footer/footer.component.html

@@ -1,25 +1,26 @@
-@if (todos$ | async; as todos) {
-  @if (todos.length > 0) {
-    <footer class="footer">
-      <app-counter></app-counter>
-      @if (filter$ | async; as filter) {
-        <ul class="filters">
-          <li>
-            <a routerLink="/" [class.selected]="filter === 'all'">All</a>
+@let todos = store.todos();
+
+@if (todos.length > 0) {
+  <footer class="footer">
+    <app-counter />
+    @let filter = store.filter();
+
+      <ul class="filters">
+        <li>
+          <a routerLink="/" [class.selected]="filter === 'all'">All</a>
+        </li>
+        <li>
+          <a routerLink="/pending" [class.selected]="filter === 'pending'"
+            >Pending</a
+            >
           </li>
           <li>
-            <a routerLink="/pending" [class.selected]="filter === 'pending'"
-              >Pending</a
+            <a routerLink="/completed" [class.selected]="filter === 'completed'"
+              >Completed</a
               >
             </li>
-            <li>
-              <a routerLink="/completed" [class.selected]="filter === 'completed'"
-                >Completed</a
-                >
-              </li>
-            </ul>
-          }
-          <app-clear-btn></app-clear-btn>
-        </footer>
-      }
+          </ul>
+
+        <app-clear-btn />
+      </footer>
     }

src/app/components/footer/footer.component.ts

@@ -1,23 +1,17 @@
 import { Component, ChangeDetectionStrategy, inject } from '@angular/core';
 import { RouterLink } from '@angular/router';
-import { AsyncPipe } from '@angular/common';
 
-import { TodoService } from '@services/todo.service';
+import { TodosStore } from '@services/todos.store';
 import { CounterComponent } from '@components/counter/counter.component';
 import { ClearBtnComponent } from '@components/clear-btn/clear-btn.component';
 
 @Component({
   standalone: true,
-  imports: [AsyncPipe, CounterComponent, ClearBtnComponent, RouterLink],
+  imports: [CounterComponent, ClearBtnComponent, RouterLink],
   selector: 'app-footer',
   templateUrl: './footer.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FooterComponent {
-  private todoService = inject(TodoService);
-
-
-  todos$ = this.todoService.getTodos();
-  filter$ = this.todoService.getFilter();
-
+  readonly store = inject(TodosStore);
 }

src/app/components/header/header.component.ts

@@ -1,7 +1,7 @@
 import { Component, ChangeDetectionStrategy, inject } from '@angular/core';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
 
-import { TodoService } from '@services/todo.service';
+import { TodosStore } from '@services/todos.store';
 
 @Component({
   standalone: true,
@@ -11,14 +11,14 @@ import { TodoService } from '@services/todo.service';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HeaderComponent {
-  private todoService = inject(TodoService);
+  readonly store = inject(TodosStore);
 
   input = new FormControl('', { nonNullable: true });
 
   addTodo() {
     const title = this.input.value.trim();
     if (title !== '') {
-      this.todoService.add(title);
+      this.store.add(title);
       this.input.setValue('');
     }
   }

src/app/components/todo/todo.component.ts

@@ -4,7 +4,7 @@ import { NgClass } from '@angular/common';
 
 
 import { Todo } from '@models/todo.model';
-import { TodoService } from '@services/todo.service';
+import { TodosStore } from '@services/todos.store';
 
 @Component({
   standalone: true,
@@ -14,7 +14,7 @@ import { TodoService } from '@services/todo.service';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TodoComponent {
-  private todoService = inject(TodoService);
+  readonly store = inject(TodosStore);
   private cdRef = inject(ChangeDetectorRef);
 
   _todo!: Todo;
@@ -28,18 +28,18 @@ export class TodoComponent {
   @ViewChild('inputElement') inputElement!: ElementRef<HTMLInputElement>;
 
   toggle() {
-    this.todoService.toggle(this._todo.id);
+    this.store.toggle(this._todo.id);
   }
 
   update() {
     const title = this.input.value.trim();
     if (title !== '') {
-      this.todoService.update(this._todo.id, { title });
+      this.store.update(this._todo.id, { title });
     }
   }
 
   remove() {
-    this.todoService.remove(this._todo.id);
+    this.store.remove(this._todo.id);
   }
 
   escape() {

src/app/components/todos/todos.component.html

@@ -1,11 +1,11 @@
-@if (todos$ | async; as todos) {
-  @if (todos.length > 0) {
-    <section class="main">
-      <ul class="todo-list">
-        @for (todo of todos; track todo) {
-          <app-todo [todo]="todo"></app-todo>
-        }
-      </ul>
-    </section>
-  }
+@let todos = store.visibleTodos();
+@if (todos.length > 0) {
+  <section class="main">
+    <ul class="todo-list">
+      @for (todo of todos; track todo.id) {
+        <app-todo [todo]="todo" />
+      }
+    </ul>
+  </section>
 }
+

src/app/components/todos/todos.component.ts

@@ -1,32 +1,29 @@
 import { Component, OnInit, ChangeDetectionStrategy, inject } from '@angular/core';
-import { AsyncPipe } from '@angular/common';
 import { ActivatedRoute } from '@angular/router';
 import { Filter } from '@models/filter.model';
 import { TodoComponent } from '@components/todo/todo.component';
 
-import { TodoService } from '@services/todo.service';
+import { TodosStore } from '@services/todos.store';
 
 @Component({
   standalone: true,
-  imports: [TodoComponent, AsyncPipe],
+  imports: [TodoComponent],
   selector: 'app-todos',
   templateUrl: './todos.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TodosComponent implements OnInit {
-  private todoService = inject(TodoService);
+  readonly store = inject(TodosStore);
   private route = inject(ActivatedRoute);
 
-  todos$ = this.todoService.getTodosByFilter();
-
   constructor() {
     this.route.paramMap.subscribe((params) => {
       const filter = params.get('filter') as Filter;
-      this.todoService.changeFilter(filter || 'all');
+      this.store.changeFilter(filter || 'all');
     });
   }
 
   ngOnInit(): void {
-    this.todoService.readStorage();
+    // this.store.readStorage();
   }
 }

src/app/pages/home/home.component.html

@@ -1,7 +1,7 @@
 <section class="todoapp">
-  <app-header></app-header>
+  <app-header />
   <div class="container todoapp-wrapper">
-    <app-todos></app-todos>
-    <app-footer></app-footer>
+    <app-todos />
+    <app-footer />
   </div>
 </section>