Update playground

Author: PKief

playground/app/app.component.html

@@ -1,37 +1,45 @@
-<h1>Angular State</h1>
-<h2>Playground</h2>
-
-<h3>Todos</h3>
-
-<input
-  type="text"
-  placeholder="New Todo"
-  #todoInput
-  (keydown.enter)="addTodo(todoInput.value); todoInput.value = ''"
-/>
-
-<ng-container *ngIf="uncompletedTodos$ | async; let todos">
-  <h4 *ngIf="todos.length > 0">Open</h4>
-
-  <ul>
-    <li *ngFor="let todo of uncompletedTodos$ | async">
-      <div>
-        <span>{{ todo.description }}</span>
-        <button (click)="completeTodo(todo)">Complete</button>
-      </div>
-    </li>
-  </ul>
-</ng-container>
-
-<ng-container *ngIf="completedTodos$ | async; let todos">
-  <h4 *ngIf="todos.length > 0">Completed</h4>
-
-  <ul>
-    <li *ngFor="let todo of todos">
-      <div>
-        <span>{{ todo.description }}</span>
-        <button (click)="uncompleteTodo(todo)">Uncomplete</button>
-      </div>
-    </li>
-  </ul>
-</ng-container>
+<h1>Angular State</h1>
+<h2>Playground</h2>
+
+<h3>Todos</h3>
+
+<input
+  type="text"
+  placeholder="New Todo"
+  #todoInput
+  (keydown.enter)="addTodo(todoInput.value); todoInput.value = ''"
+/>
+
+@if (uncompletedTodos$().length > 0) {
+  <h4>Open</h4>
+
+  <ul>
+    @for (todo of uncompletedTodos$(); track todo.id) {
+      <li>
+        <div>
+          <span>{{ todo.description }}</span>
+          <button (click)="completeTodo(todo)">Complete</button>
+        </div>
+      </li>
+    } @empty {
+      No uncompleted todos
+    }
+  </ul>
+}
+
+@if (completedTodos$().length > 0) {
+  <h4>Completed</h4>
+
+  <ul>
+    @for (todo of completedTodos$(); track todo.id) {
+      <li>
+        <div>
+          <span>{{ todo.description }}</span>
+          <button (click)="completeTodo(todo)">Uncomplete</button>
+        </div>
+      </li>
+    } @empty {
+      No uncompleted todos
+    }
+  </ul>
+}

playground/app/app.component.ts

@@ -1,5 +1,9 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { map, Observable } from 'rxjs';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Signal,
+  computed,
+} from '@angular/core';
 import { Todo, TodoStoreService } from './services/todo-store.service';
 
 @Component({
@@ -9,16 +13,17 @@ import { Todo, TodoStoreService } from './services/todo-store.service';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent {
-  readonly completedTodos$: Observable<Todo[]>;
-  readonly uncompletedTodos$: Observable<Todo[]>;
+  readonly completedTodos$: Signal<Todo[]>;
+  readonly uncompletedTodos$: Signal<Todo[]>;
 
   constructor(private todoStore: TodoStoreService) {
-    const allTodos$ = this.todoStore.select(state => state.todos);
-    this.completedTodos$ = allTodos$.pipe(
-      map(todos => todos.filter(t => !!t.completed))
+    const allTodos$ = this.todoStore.selectAsSignal(state => state.todos);
+
+    this.completedTodos$ = computed(() =>
+      allTodos$()?.filter(t => t.completed)
     );
-    this.uncompletedTodos$ = allTodos$.pipe(
-      map(todos => todos.filter(t => !t.completed))
+    this.uncompletedTodos$ = computed(() =>
+      allTodos$()?.filter(t => !t.completed)
     );
   }