Answer: 8

apps/angular/1-projection/src/app/component/city-card/city-card.component.ts

@@ -1,9 +1,33 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  OnInit,
+} from '@angular/core';
+import { CityStore } from '../../data-access/city.store';
+import { FakeHttpService } from '../../data-access/fake-http.service';
+import { CardType } from '../../model/card.model';
+import { CardComponent } from '../../ui/card/card.component';
 
 @Component({
   selector: 'app-city-card',
-  template: 'TODO City',
-  imports: [],
+  template: `
+    <app-card
+      [list]="cities()"
+      [type]="cardType"
+      backgroundColor="rgba(39, 85, 129, 0.1)" />
+  `,
+  imports: [CardComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class CityCardComponent {}
+export class CityCardComponent implements OnInit {
+  private http = inject(FakeHttpService);
+  private store = inject(CityStore);
+
+  cities = this.store.cities;
+  cardType = CardType.CITY;
+
+  ngOnInit(): void {
+    this.http.fetchCities$.subscribe((c) => this.store.addAll(c));
+  }
+}

apps/angular/1-projection/src/app/component/student-card/student-card.component.ts

@@ -15,15 +15,8 @@ import { CardComponent } from '../../ui/card/card.component';
     <app-card
       [list]="students()"
       [type]="cardType"
-      customClass="bg-light-green" />
+      backgroundColor="rgba(0, 250, 0, 0.1)" />
   `,
-  styles: [
-    `
-      ::ng-deep .bg-light-green {
-        background-color: rgba(0, 250, 0, 0.1);
-      }
-    `,
-  ],
   imports: [CardComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

apps/angular/1-projection/src/app/component/teacher-card/teacher-card.component.ts

@@ -10,15 +10,8 @@ import { CardComponent } from '../../ui/card/card.component';
     <app-card
       [list]="teachers()"
       [type]="cardType"
-      customClass="bg-light-red"></app-card>
+      backgroundColor="rgba(250, 0, 0, 0.1)"></app-card>
   `,
-  styles: [
-    `
-      ::ng-deep .bg-light-red {
-        background-color: rgba(250, 0, 0, 0.1);
-      }
-    `,
-  ],
   imports: [CardComponent],
 })
 export class TeacherCardComponent implements OnInit {

apps/angular/1-projection/src/app/data-access/city.store.ts

@@ -5,7 +5,7 @@ import { City } from '../model/city.model';
   providedIn: 'root',
 })
 export class CityStore {
-  private cities = signal<City[]>([]);
+  public cities = signal<City[]>([]);
 
   addAll(cities: City[]) {
     this.cities.set(cities);

apps/angular/1-projection/src/app/ui/card/card.component.ts

@@ -1,6 +1,11 @@
 import { NgOptimizedImage } from '@angular/common';
-import { Component, inject, input } from '@angular/core';
-import { randStudent, randTeacher } from '../../data-access/fake-http.service';
+import { Component, computed, inject, input } from '@angular/core';
+import { CityStore } from '../../data-access/city.store';
+import {
+  randomCity,
+  randStudent,
+  randTeacher,
+} from '../../data-access/fake-http.service';
 import { StudentStore } from '../../data-access/student.store';
 import { TeacherStore } from '../../data-access/teacher.store';
 import { CardType } from '../../model/card.model';
@@ -11,18 +16,13 @@ import { ListItemComponent } from '../list-item/list-item.component';
   template: `
     <div
       class="flex w-fit flex-col gap-3 rounded-md border-2 border-black p-4"
-      [class]="customClass()">
-      @if (type() === CardType.TEACHER) {
-        <img ngSrc="assets/img/teacher.png" width="200" height="200" />
-      }
-      @if (type() === CardType.STUDENT) {
-        <img ngSrc="assets/img/student.webp" width="200" height="200" />
-      }
+      [style.backgroundColor]="backgroundColor()">
+      <img [ngSrc]="imageSrc()" width="200" height="200" />
 
       <section>
         @for (item of list(); track item) {
           <app-list-item
-            [name]="item.firstName"
+            [name]="itemName(item)"
             [id]="item.id"
             [type]="type()"></app-list-item>
         }
@@ -40,19 +40,39 @@ import { ListItemComponent } from '../list-item/list-item.component';
 export class CardComponent {
   private teacherStore = inject(TeacherStore);
   private studentStore = inject(StudentStore);
+  private cityStore = inject(CityStore);
 
   readonly list = input<any[] | null>(null);
   readonly type = input.required<CardType>();
-  readonly customClass = input('');
+  readonly backgroundColor = input('');
 
   CardType = CardType;
 
+  addHandler: Record<CardType, () => void> = {
+    [CardType.TEACHER]: () => this.teacherStore.addOne(randTeacher()),
+    [CardType.STUDENT]: () => this.studentStore.addOne(randStudent()),
+    [CardType.CITY]: () => this.cityStore.addOne(randomCity()),
+  };
+
+  nameLookup: Record<CardType, (item: any) => string> = {
+    [CardType.TEACHER]: (item: any) => item.firstName,
+    [CardType.STUDENT]: (item: any) => item.firstName,
+    [CardType.CITY]: (item: any) => item.name,
+  };
+
   addNewItem() {
-    const type = this.type();
-    if (type === CardType.TEACHER) {
-      this.teacherStore.addOne(randTeacher());
-    } else if (type === CardType.STUDENT) {
-      this.studentStore.addOne(randStudent());
-    }
+    this.addHandler[this.type()]();
+  }
+
+  itemName(item: any) {
+    return this.nameLookup[this.type()](item);
   }
+
+  imageLookup: Record<CardType, string> = {
+    [CardType.TEACHER]: 'assets/img/teacher.png',
+    [CardType.STUDENT]: 'assets/img/student.webp',
+    [CardType.CITY]: 'assets/img/city.png',
+  };
+
+  imageSrc = computed(() => this.imageLookup[this.type()]);
 }

apps/angular/1-projection/src/app/ui/list-item/list-item.component.ts

@@ -4,6 +4,7 @@ import {
   inject,
   input,
 } from '@angular/core';
+import { CityStore } from '../../data-access/city.store';
 import { StudentStore } from '../../data-access/student.store';
 import { TeacherStore } from '../../data-access/teacher.store';
 import { CardType } from '../../model/card.model';
@@ -23,17 +24,19 @@ import { CardType } from '../../model/card.model';
 export class ListItemComponent {
   private teacherStore = inject(TeacherStore);
   private studentStore = inject(StudentStore);
+  private cityStore = inject(CityStore);
 
   readonly id = input.required<number>();
   readonly name = input.required<string>();
   readonly type = input.required<CardType>();
 
+  deleteItem: Record<CardType, (id: number) => void> = {
+    [CardType.TEACHER]: (id: number) => this.teacherStore.deleteOne(id),
+    [CardType.STUDENT]: (id: number) => this.studentStore.deleteOne(id),
+    [CardType.CITY]: (id: number) => this.cityStore.deleteOne(id),
+  };
+
   delete(id: number) {
-    const type = this.type();
-    if (type === CardType.TEACHER) {
-      this.teacherStore.deleteOne(id);
-    } else if (type === CardType.STUDENT) {
-      this.studentStore.deleteOne(id);
-    }
+    this.deleteItem[this.type()](id);
   }
 }

apps/angular/5-crud-application/src/app/app.component.ts

@@ -1,49 +1,139 @@
-import { HttpClient } from '@angular/common/http';
-import { Component, inject, OnInit } from '@angular/core';
-import { randText } from '@ngneat/falso';
+import { Component, OnInit, inject } from '@angular/core';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { TodoListService } from './data-access/todo-list.service';
+import { Todo } from './model/todo.model';
 
 @Component({
-  imports: [],
   selector: 'app-root',
+  imports: [MatProgressSpinnerModule],
   template: `
-    @for (todo of todos; track todo.id) {
-      {{ todo.title }}
-      <button (click)="update(todo)">Update</button>
+    @if (loading()) {
+      <div class="overlay">
+        <mat-progress-spinner mode="indeterminate" diameter="48" />
+      </div>
     }
+
+    <main class="page">
+      <h1>Todo list</h1>
+
+      @if (todos().length === 0) {
+        <p class="muted">Loading...</p>
+      } @else {
+        <ul class="list">
+          @for (todo of todos(); track todo.id) {
+            <li class="item">
+              <div>
+                <p class="muted">#{{ todo.id }} · User {{ todo.userId }}</p>
+                <p class="title">{{ todo.title }}</p>
+              </div>
+              <div class="actions">
+                <button type="button" class="btn" (click)="update(todo)">
+                  Update
+                </button>
+                <button
+                  type="button"
+                  class="btn btn-delete"
+                  (click)="delete(todo)">
+                  Delete
+                </button>
+              </div>
+            </li>
+          }
+        </ul>
+      }
+    </main>
   `,
-  styles: [],
+  styles: [
+    `
+      :host {
+        display: block;
+        font-family:
+          system-ui,
+          -apple-system,
+          'Segoe UI',
+          sans-serif;
+        color: #0f172a;
+        padding: 16px;
+      }
+      .page {
+        max-width: 720px;
+        margin: 0 auto;
+      }
+      h1 {
+        margin: 0 0 10px;
+        font-size: 24px;
+      }
+      .muted {
+        margin: 0;
+        color: #64748b;
+      }
+      .list {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: grid;
+        gap: 8px;
+      }
+      .item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: 10px;
+        padding: 12px;
+        border-radius: 10px;
+        border: 1px solid #e5e7eb;
+        background: #f8fafc;
+      }
+      .title {
+        margin: 6px 0 0;
+        font-weight: 600;
+      }
+      .actions {
+        display: flex;
+        gap: 8px;
+      }
+      .btn {
+        border: none;
+        background: #475569;
+        color: #fff;
+        padding: 8px 12px;
+        border-radius: 8px;
+        cursor: pointer;
+        font-weight: 600;
+        transition: opacity 120ms ease;
+      }
+      .btn-delete {
+        background: #ef4444;
+      }
+      .btn:hover {
+        opacity: 0.9;
+      }
+      .overlay {
+        position: fixed;
+        inset: 0;
+        display: grid;
+        place-items: center;
+        background: rgba(255, 255, 255, 0.6);
+        backdrop-filter: blur(2px);
+        z-index: 10;
+      }
+    `,
+  ],
 })
 export class AppComponent implements OnInit {
-  private http = inject(HttpClient);
-
-  todos!: any[];
+  private todoService = inject(TodoListService);
+  todos = this.todoService.todos;
+  loading = this.todoService.loading;
 
   ngOnInit(): void {
-    this.http
-      .get<any[]>('https://jsonplaceholder.typicode.com/todos')
-      .subscribe((todos) => {
-        this.todos = todos;
-      });
+    this.todoService.loadTodos();
+  }
+
+  update(todo: Todo) {
+    this.todoService.updateTodo(todo);
   }
 
-  update(todo: any) {
-    this.http
-      .put<any>(
-        `https://jsonplaceholder.typicode.com/todos/${todo.id}`,
-        JSON.stringify({
-          todo: todo.id,
-          title: randText(),
-          body: todo.body,
-          userId: todo.userId,
-        }),
-        {
-          headers: {
-            'Content-type': 'application/json; charset=UTF-8',
-          },
-        },
-      )
-      .subscribe((todoUpdated: any) => {
-        this.todos[todoUpdated.id - 1] = todoUpdated;
-      });
+  delete(todo: Todo) {
+    this.todoService.deleteTodo(todo);
   }
 }