Answer:43

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

@@ -1,13 +1,53 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, inject, OnInit } from '@angular/core';
+import { CityStore } from '../../data-access/city.store';
+import {
+  FakeHttpService,
+  randomCity,
+} from '../../data-access/fake-http.service';
+import { CardRowDirective } from '../../ui/card/card-row.directive';
+import { CardComponent } from '../../ui/card/card.component';
+import { ListItemComponent } from '../../ui/list-item/list-item.component';
 
 @Component({
   selector: 'app-city-card',
-  template: 'TODO City',
+  template: `
+    <app-card
+      [list]="cities()"
+      (addNewItem)="this.addCity()"
+      class="bg-light-blue">
+      <img src="assets/img/city.png" width="200px" alt="city" />
+      <ng-template [cardRow]="cities()" let-city>
+        <app-list-item [id]="city.id" (deleteItem)="this.deleteCity(city.id)">
+          {{ city.name }}
+        </app-list-item>
+      </ng-template>
+    </app-card>
+  `,
   standalone: true,
-  imports: [],
+  imports: [CardComponent, ListItemComponent, CardRowDirective],
+  styles: [
+    `
+      .bg-light-blue {
+        background-color: rgba(0, 0, 250, 0.1);
+      }
+    `,
+  ],
 })
 export class CityCardComponent implements OnInit {
-  constructor() {}
+  private http = inject(FakeHttpService);
+  private store = inject(CityStore);
 
-  ngOnInit(): void {}
+  cities = this.store.cities;
+
+  ngOnInit(): void {
+    this.http.fetchCities$.subscribe((t) => this.store.addAll(t));
+  }
+
+  addCity() {
+    this.store.addOne(randomCity());
+  }
+
+  deleteCity(id: number) {
+    this.store.deleteOne(id);
+  }
 }

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

@@ -1,40 +1,56 @@
-import { Component, OnInit } from '@angular/core';
-import { FakeHttpService } from '../../data-access/fake-http.service';
+import { NgClass } from '@angular/common';
+import { Component, inject, OnInit } from '@angular/core';
+import {
+  FakeHttpService,
+  randStudent,
+} from '../../data-access/fake-http.service';
 import { StudentStore } from '../../data-access/student.store';
-import { CardType } from '../../model/card.model';
-import { Student } from '../../model/student.model';
+import { CardRowDirective } from '../../ui/card/card-row.directive';
 import { CardComponent } from '../../ui/card/card.component';
+import { ListItemComponent } from '../../ui/list-item/list-item.component';
 
 @Component({
   selector: 'app-student-card',
   template: `
     <app-card
-      [list]="students"
-      [type]="cardType"
-      customClass="bg-light-green"></app-card>
+      [list]="students()"
+      (addNewItem)="addStudent()"
+      class="bg-light-green">
+      <img src="assets/img/student.webp" width="200px" alt="student" />
+      <ng-template [cardRow]="students()" let-student>
+        <app-list-item
+          [id]="student.id"
+          (deleteItem)="this.deleteStudent(student.id)">
+          {{ student.firstName }}
+        </app-list-item>
+      </ng-template>
+    </app-card>
   `,
   standalone: true,
   styles: [
     `
-      ::ng-deep .bg-light-green {
+      .bg-light-green {
         background-color: rgba(0, 250, 0, 0.1);
       }
     `,
   ],
-  imports: [CardComponent],
+  imports: [CardComponent, NgClass, CardRowDirective, ListItemComponent],
 })
 export class StudentCardComponent implements OnInit {
-  students: Student[] = [];
-  cardType = CardType.STUDENT;
+  private http = inject(FakeHttpService);
+  private store = inject(StudentStore);
 
-  constructor(
-    private http: FakeHttpService,
-    private store: StudentStore,
-  ) {}
+  students = this.store.students;
 
   ngOnInit(): void {
     this.http.fetchStudents$.subscribe((s) => this.store.addAll(s));
+  }
+
+  addStudent() {
+    this.store.addOne(randStudent());
+  }
 
-    this.store.students$.subscribe((s) => (this.students = s));
+  deleteStudent(id: number) {
+    this.store.deleteOne(id);
   }
 }

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

@@ -1,40 +1,54 @@
-import { Component, OnInit } from '@angular/core';
-import { FakeHttpService } from '../../data-access/fake-http.service';
+import { Component, inject, OnInit } from '@angular/core';
+import {
+  FakeHttpService,
+  randTeacher,
+} from '../../data-access/fake-http.service';
 import { TeacherStore } from '../../data-access/teacher.store';
-import { CardType } from '../../model/card.model';
-import { Teacher } from '../../model/teacher.model';
+import { CardRowDirective } from '../../ui/card/card-row.directive';
 import { CardComponent } from '../../ui/card/card.component';
+import { ListItemComponent } from '../../ui/list-item/list-item.component';
 
 @Component({
   selector: 'app-teacher-card',
   template: `
     <app-card
-      [list]="teachers"
-      [type]="cardType"
-      customClass="bg-light-red"></app-card>
+      [list]="teachers()"
+      (addNewItem)="this.addTeacher()"
+      class="bg-light-red">
+      <img src="assets/img/teacher.png" width="200px" alt="teacher" />
+      <ng-template [cardRow]="teachers()" let-teacher>
+        <app-list-item
+          [id]="teacher.id"
+          (deleteItem)="this.deleteTeacher(teacher.id)">
+          {{ teacher.firstName }}
+        </app-list-item>
+      </ng-template>
+    </app-card>
   `,
   styles: [
     `
-      ::ng-deep .bg-light-red {
+      .bg-light-red {
         background-color: rgba(250, 0, 0, 0.1);
       }
     `,
   ],
   standalone: true,
-  imports: [CardComponent],
+  imports: [CardComponent, CardRowDirective, ListItemComponent],
 })
 export class TeacherCardComponent implements OnInit {
-  teachers: Teacher[] = [];
-  cardType = CardType.TEACHER;
-
-  constructor(
-    private http: FakeHttpService,
-    private store: TeacherStore,
-  ) {}
+  private http = inject(FakeHttpService);
+  private store = inject(TeacherStore);
+  teachers = this.store.teachers;
 
   ngOnInit(): void {
     this.http.fetchTeachers$.subscribe((t) => this.store.addAll(t));
+  }
+
+  addTeacher(): void {
+    this.store.addOne(randTeacher());
+  }
 
-    this.store.teachers$.subscribe((t) => (this.teachers = t));
+  deleteTeacher(id: number) {
+    this.store.deleteOne(id);
   }
 }

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

@@ -1,23 +1,14 @@
-import { Injectable } from '@angular/core';
-import { BehaviorSubject } from 'rxjs';
+import { computed, Injectable } from '@angular/core';
 import { City } from '../model/city.model';
+import { DataStore } from './data.store';
 
 @Injectable({
   providedIn: 'root',
 })
-export class CityStore {
-  private cities = new BehaviorSubject<City[]>([]);
-  cities$ = this.cities.asObservable();
-
-  addAll(cities: City[]) {
-    this.cities.next(cities);
-  }
-
-  addOne(student: City) {
-    this.cities.next([...this.cities.value, student]);
+export class CityStore extends DataStore<City> {
+  constructor() {
+    super();
   }
 
-  deleteOne(id: number) {
-    this.cities.next(this.cities.value.filter((s) => s.id !== id));
-  }
+  cities = computed(() => this.entries());
 }

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

@@ -0,0 +1,17 @@
+import { signal } from '@angular/core';
+
+export class DataStore<T extends { id: number }> {
+  protected entries = signal<T[]>([]);
+
+  addAll(items: T[]) {
+    this.entries.set(items);
+  }
+
+  addOne(entry: T) {
+    this.entries.update((e) => [...e, entry]);
+  }
+
+  deleteOne(id: number) {
+    this.entries.update((e) => e.filter((t) => t.id !== id));
+  }
+}

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

@@ -1,23 +1,14 @@
-import { Injectable } from '@angular/core';
-import { BehaviorSubject } from 'rxjs';
+import { computed, Injectable } from '@angular/core';
 import { Student } from '../model/student.model';
+import { DataStore } from './data.store';
 
 @Injectable({
   providedIn: 'root',
 })
-export class StudentStore {
-  private students = new BehaviorSubject<Student[]>([]);
-  students$ = this.students.asObservable();
-
-  addAll(students: Student[]) {
-    this.students.next(students);
-  }
-
-  addOne(student: Student) {
-    this.students.next([...this.students.value, student]);
+export class StudentStore extends DataStore<Student> {
+  constructor() {
+    super();
   }
 
-  deleteOne(id: number) {
-    this.students.next(this.students.value.filter((s) => s.id !== id));
-  }
+  students = computed(() => this.entries());
 }

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

@@ -1,23 +1,14 @@
-import { Injectable } from '@angular/core';
-import { BehaviorSubject } from 'rxjs';
+import { computed, Injectable } from '@angular/core';
 import { Teacher } from '../model/teacher.model';
+import { DataStore } from './data.store';
 
 @Injectable({
   providedIn: 'root',
 })
-export class TeacherStore {
-  private teachers = new BehaviorSubject<Teacher[]>([]);
-  teachers$ = this.teachers.asObservable();
-
-  addAll(teachers: Teacher[]) {
-    this.teachers.next(teachers);
-  }
-
-  addOne(teacher: Teacher) {
-    this.teachers.next([...this.teachers.value, teacher]);
+export class TeacherStore extends DataStore<Teacher> {
+  constructor() {
+    super();
   }
 
-  deleteOne(id: number) {
-    this.teachers.next(this.teachers.value.filter((t) => t.id !== id));
-  }
+  teachers = computed(() => this.entries());
 }

apps/angular/1-projection/src/app/ui/card/card-row.directive.spec.ts

@@ -0,0 +1,8 @@
+import { CardRowDirective } from './card-row.directive';
+
+describe('CardRowDirective', () => {
+  it('should create an instance', () => {
+    const directive = new CardRowDirective();
+    expect(directive).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,20 @@
+import { Directive, input } from '@angular/core';
+
+export interface SelectTemplateContext<T> {
+  $implicit: T;
+}
+
+@Directive({
+  selector: 'ng-template [cardRow]',
+  standalone: true,
+})
+export class CardRowDirective<T> {
+  cardRow = input.required<T[]>();
+
+  static ngTemplateContextGuard<T>(
+    dir: CardRowDirective<T>,
+    ctx: unknown,
+  ): ctx is SelectTemplateContext<T> {
+    return true;
+  }
+}

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

@@ -0,0 +1,15 @@
+<ng-content select="img" />
+<section>
+  @for (item of list(); track item.id) {
+    <ng-template
+      [ngTemplateOutlet]="rowTemplate()"
+      [ngTemplateOutletContext]="{ $implicit: item }">
+    </ng-template>
+  }
+</section>
+
+<button
+  class="rounded-sm border border-blue-500 bg-blue-300 p-2"
+  (click)="addNewItem.emit()">
+  Add
+</button>