Answer:1

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

@@ -1,13 +1,65 @@
 import { Component, OnInit } from '@angular/core';
+import { CityStore } from '../../data-access/city.store';
+import {
+  FakeHttpService,
+  randomCity,
+} from '../../data-access/fake-http.service';
+import { City } from '../../model/city.model';
+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: `
+    <ng-template #cityTemaplte let-city>
+      <app-list-item (itemDeleted)="onDeleteCity(city.id)">
+        <div item-body>{{ city.name }}</div>
+      </app-list-item>
+    </ng-template>
+    <app-card [customTemplate]="cityTemaplte" [items]="cities">
+      <div card-header>
+        <img src="assets/img/city.png" width="200px" />
+      </div>
+      <div card-footer>
+        <button
+          style="width: 100%;"
+          class="rounded-sm border border-blue-500 bg-blue-300 p-2"
+          (click)="onAddCity()">
+          Add
+        </button>
+      </div>
+    </app-card>
+  `,
   standalone: true,
-  imports: [],
+  styles: [
+    `
+      :host {
+        --card-background: lightyellow;
+      }
+    `,
+  ],
+  imports: [CardComponent, ListItemComponent],
 })
 export class CityCardComponent implements OnInit {
-  constructor() {}
+  cities: City[] = [];
 
-  ngOnInit(): void {}
+  constructor(
+    private store: CityStore,
+    private http: FakeHttpService,
+  ) {}
+
+  ngOnInit(): void {
+    this.http.fetchCities$.subscribe((c) => this.store.addAll(c));
+
+    this.store.cities$.subscribe((c) => (this.cities = c));
+  }
+
+  onAddCity() {
+    const city = randomCity();
+    this.store.addOne(city);
+  }
+
+  onDeleteCity(id: number) {
+    this.store.deleteOne(id);
+  }
 }

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

@@ -1,61 +1,34 @@
-import { NgFor, NgIf } from '@angular/common';
-import { Component, Input } from '@angular/core';
-import { 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';
-import { ListItemComponent } from '../list-item/list-item.component';
+import { NgFor, NgTemplateOutlet } from '@angular/common';
+import { Component, Input, TemplateRef } from '@angular/core';
 
 @Component({
   selector: 'app-card',
   template: `
     <div
-      class="flex w-fit flex-col gap-3 rounded-md border-2 border-black p-4"
-      [class]="customClass">
-      <img
-        *ngIf="type === CardType.TEACHER"
-        src="assets/img/teacher.png"
-        width="200px" />
-      <img
-        *ngIf="type === CardType.STUDENT"
-        src="assets/img/student.webp"
-        width="200px" />
-
-      <section>
-        <app-list-item
-          *ngFor="let item of list"
-          [name]="item.firstName"
-          [id]="item.id"
-          [type]="type"></app-list-item>
-      </section>
-
-      <button
-        class="rounded-sm border border-blue-500 bg-blue-300 p-2"
-        (click)="addNewItem()">
-        Add
-      </button>
+      class="card flex w-fit flex-col gap-3 rounded-md border-2 border-black p-4">
+      <ng-content select="[card-header]"></ng-content>
+      <div *ngFor="let item of items">
+        <ng-container
+          *ngTemplateOutlet="
+            customTemplate;
+            context: { $implicit: item }
+          "></ng-container>
+      </div>
+      <ng-content select="[card-footer]"></ng-content>
     </div>
   `,
   standalone: true,
-  imports: [NgIf, NgFor, ListItemComponent],
+  styles: [
+    `
+      .card {
+        background-color: var(--card-background, white);
+        border-color: var(--border-color, black);
+      }
+    `,
+  ],
+  imports: [NgFor, NgTemplateOutlet],
 })
 export class CardComponent {
-  @Input() list: any[] | null = null;
-  @Input() type!: CardType;
-  @Input() customClass = '';
-
-  CardType = CardType;
-
-  constructor(
-    private teacherStore: TeacherStore,
-    private studentStore: StudentStore,
-  ) {}
-
-  addNewItem() {
-    if (this.type === CardType.TEACHER) {
-      this.teacherStore.addOne(randTeacher());
-    } else if (this.type === CardType.STUDENT) {
-      this.studentStore.addOne(randStudent());
-    }
-  }
+  @Input() customTemplate!: TemplateRef<any>;
+  @Input() items!: any[];
 }

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

@@ -1,35 +1,21 @@
-import { Component, Input } from '@angular/core';
-import { StudentStore } from '../../data-access/student.store';
-import { TeacherStore } from '../../data-access/teacher.store';
-import { CardType } from '../../model/card.model';
+import { Component, EventEmitter, Output } from '@angular/core';
 
 @Component({
   selector: 'app-list-item',
   template: `
     <div class="border-grey-300 flex justify-between border px-2 py-1">
-      {{ name }}
-      <button (click)="delete(id)">
+      <ng-content select="[item-body]"></ng-content>
+      <button (click)="delete()">
         <img class="h-5" src="assets/svg/trash.svg" />
       </button>
     </div>
   `,
   standalone: true,
 })
 export class ListItemComponent {
-  @Input() id!: number;
-  @Input() name!: string;
-  @Input() type!: CardType;
+  @Output() itemDeleted = new EventEmitter<any>();
 
-  constructor(
-    private teacherStore: TeacherStore,
-    private studentStore: StudentStore,
-  ) {}
-
-  delete(id: number) {
-    if (this.type === CardType.TEACHER) {
-      this.teacherStore.deleteOne(id);
-    } else if (this.type === CardType.STUDENT) {
-      this.studentStore.deleteOne(id);
-    }
+  delete() {
+    this.itemDeleted.emit();
   }
 }