Answer:1

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

@@ -1,9 +1,30 @@
-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" customClass="bg-light-blue" />
+  `,
+  imports: [CardComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class CityCardComponent {}
+export class CityCardComponent implements OnInit {
+  private store = inject(CityStore);
+  private http = inject(FakeHttpService);
+
+  cities = this.store.cities;
+  cardType = CardType.CITY;
+
+  ngOnInit(): void {
+    this.http.fetchCities$.subscribe((s) => this.store.addAll(s));
+  }
+}

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

@@ -5,17 +5,20 @@ 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);
+    console.log('NEW STATE:', this.cities());
   }
 
   addOne(city: City) {
     this.cities.set([...this.cities(), city]);
+    console.log('NEW STATE:', this.cities());
   }
 
   deleteOne(id: number) {
     this.cities.set(this.cities().filter((s) => s.id !== id));
+    console.log('NEW STATE:', this.cities());
   }
 }

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

@@ -1,6 +1,11 @@
-import { NgOptimizedImage } from '@angular/common';
+import { NgClass, NgOptimizedImage } from '@angular/common';
 import { Component, inject, input } from '@angular/core';
-import { randStudent, randTeacher } from '../../data-access/fake-http.service';
+import { CityStore } from '../../data-access/city.store';
+import {
+  randStudent,
+  randTeacher,
+  randomCity,
+} 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,21 @@ 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()">
+      [ngClass]="type() === CardType.CITY ? 'bg-blue-200' : customClass()">
       @if (type() === CardType.TEACHER) {
         <img ngSrc="assets/img/teacher.png" width="200" height="200" alt="" />
       }
       @if (type() === CardType.STUDENT) {
         <img ngSrc="assets/img/student.webp" width="200" height="200" alt="" />
       }
+      @if (type() === CardType.CITY) {
+        <img ngSrc="assets/img/city.png" width="200" height="200" alt="" />
+      }
 
       <section>
         @for (item of list(); track item) {
           <app-list-item
-            [name]="item.firstName"
+            [name]="getItemName(item)"
             [id]="item.id"
             [type]="type()"></app-list-item>
         }
@@ -35,11 +43,12 @@ import { ListItemComponent } from '../list-item/list-item.component';
       </button>
     </div>
   `,
-  imports: [ListItemComponent, NgOptimizedImage],
+  imports: [ListItemComponent, NgOptimizedImage, NgClass],
 })
 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>();
@@ -53,6 +62,15 @@ export class CardComponent {
       this.teacherStore.addOne(randTeacher());
     } else if (type === CardType.STUDENT) {
       this.studentStore.addOne(randStudent());
+    } else {
+      this.cityStore.addOne(randomCity());
+    }
+  }
+
+  getItemName(item: any) {
+    if (this.type() === CardType.CITY) {
+      return item.name;
     }
+    return item.firstName;
   }
 }

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,6 +24,7 @@ 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>();
@@ -34,6 +36,8 @@ export class ListItemComponent {
       this.teacherStore.deleteOne(id);
     } else if (type === CardType.STUDENT) {
       this.studentStore.deleteOne(id);
+    } else {
+      this.cityStore.deleteOne(id);
     }
   }
 }