Answer:50

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

@@ -6,12 +6,25 @@ import { TeacherCardComponent } from './component/teacher-card/teacher-card.comp
 @Component({
   selector: 'app-root',
   template: `
-    <div class="grid grid-cols-3 gap-3">
-      <app-teacher-card />
-      <app-student-card />
-      <app-city-card />
+    <div class="app-container">
+      <div class="cards-grid">
+        <app-teacher-card />
+        <app-student-card />
+        <app-city-card />
+      </div>
     </div>
   `,
+  styles: [
+    `
+      .app-container {
+        @apply min-h-screen bg-gray-50 p-8;
+      }
+      .cards-grid {
+        @apply grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3;
+        @apply mx-auto max-w-7xl;
+      }
+    `,
+  ],
   imports: [TeacherCardComponent, StudentCardComponent, CityCardComponent],
 })
 export class AppComponent {}

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

@@ -1,9 +1,80 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgOptimizedImage } from '@angular/common';
+import { Component, inject, OnInit } from '@angular/core';
+import { CityStore } from '../../data-access/city.store';
+import {
+  FakeHttpService,
+  randomCity,
+} from '../../data-access/fake-http.service';
+import { CardType } from '../../model/card.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',
-  imports: [],
-  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <app-card [list]="cities()" [type]="cardType" customClass="city-card">
+      <!-- Header Template -->
+      <div cardHeader class="header-content">
+        <img
+          ngSrc="assets/img/city.png"
+          width="200"
+          height="200"
+          alt="City"
+          class="header-image" />
+      </div>
+
+      <!-- Item Template -->
+      <ng-template #itemTemplate let-city>
+        <app-list-item
+          [name]="city.name"
+          [id]="city.id"
+          [type]="cardType"
+          (delete)="deleteCity(city.id)"></app-list-item>
+      </ng-template>
+
+      <!-- Footer Template -->
+      <div cardFooter>
+        <button class="add-button" (click)="addCity()">Add City</button>
+      </div>
+    </app-card>
+  `,
+  styles: [
+    `
+      .city-card {
+        @apply bg-gradient-to-br from-blue-50 to-white;
+      }
+      .header-content {
+        @apply flex justify-center;
+      }
+      .header-image {
+        @apply rounded-lg object-cover shadow-sm;
+      }
+      .add-button {
+        @apply w-full rounded-md bg-blue-500 px-4 py-2 text-white;
+        @apply transition-colors duration-200 hover:bg-blue-600;
+        @apply disabled:cursor-not-allowed disabled:opacity-50;
+      }
+    `,
+  ],
+  imports: [CardComponent, ListItemComponent, NgOptimizedImage],
+  standalone: true,
 })
-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));
+  }
+
+  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,31 +1,63 @@
+import { NgOptimizedImage } from '@angular/common';
+import { Component, inject, OnInit } from '@angular/core';
 import {
-  ChangeDetectionStrategy,
-  Component,
-  inject,
-  OnInit,
-} from '@angular/core';
-import { FakeHttpService } from '../../data-access/fake-http.service';
+  FakeHttpService,
+  randStudent,
+} from '../../data-access/fake-http.service';
 import { StudentStore } from '../../data-access/student.store';
 import { CardType } from '../../model/card.model';
 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()" [type]="cardType" customClass="student-card">
+      <!-- Header Template -->
+      <div cardHeader class="header-content">
+        <img
+          ngSrc="assets/img/student.webp"
+          width="200"
+          height="200"
+          alt="Student"
+          class="header-image" />
+      </div>
+
+      <!-- Item Template -->
+      <ng-template #itemTemplate let-student>
+        <app-list-item
+          [name]="student.firstName"
+          [id]="student.id"
+          [type]="cardType"
+          (delete)="deleteStudent(student.id)"></app-list-item>
+      </ng-template>
+
+      <!-- Footer Template -->
+      <div cardFooter>
+        <button class="add-button" (click)="addStudent()">Add Student</button>
+      </div>
+    </app-card>
   `,
   styles: [
     `
-      ::ng-deep .bg-light-green {
-        background-color: rgba(0, 250, 0, 0.1);
+      .student-card {
+        @apply bg-gradient-to-br from-green-50 to-white;
+      }
+      .header-content {
+        @apply flex justify-center;
+      }
+      .header-image {
+        @apply rounded-lg object-cover shadow-sm;
+      }
+      .add-button {
+        @apply w-full rounded-md bg-blue-500 px-4 py-2 text-white;
+        @apply transition-colors duration-200 hover:bg-blue-600;
+        @apply disabled:cursor-not-allowed disabled:opacity-50;
       }
     `,
   ],
-  imports: [CardComponent],
-  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CardComponent, ListItemComponent, NgOptimizedImage],
+  standalone: true,
 })
 export class StudentCardComponent implements OnInit {
   private http = inject(FakeHttpService);
@@ -37,4 +69,12 @@ export class StudentCardComponent implements OnInit {
   ngOnInit(): void {
     this.http.fetchStudents$.subscribe((s) => this.store.addAll(s));
   }
+
+  addStudent() {
+    this.store.addOne(randStudent());
+  }
+
+  deleteStudent(id: number) {
+    this.store.deleteOne(id);
+  }
 }

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

@@ -1,25 +1,63 @@
+import { NgOptimizedImage } from '@angular/common';
 import { Component, inject, OnInit } from '@angular/core';
-import { FakeHttpService } from '../../data-access/fake-http.service';
+import {
+  FakeHttpService,
+  randTeacher,
+} from '../../data-access/fake-http.service';
 import { TeacherStore } from '../../data-access/teacher.store';
 import { CardType } from '../../model/card.model';
 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>
+    <app-card [list]="teachers()" [type]="cardType" customClass="teacher-card">
+      <!-- Header Template -->
+      <div cardHeader class="header-content">
+        <img
+          ngSrc="assets/img/teacher.png"
+          width="200"
+          height="200"
+          alt="Teacher"
+          class="header-image" />
+      </div>
+
+      <!-- Item Template -->
+      <ng-template #itemTemplate let-teacher>
+        <app-list-item
+          [name]="teacher.firstName"
+          [id]="teacher.id"
+          [type]="cardType"
+          (delete)="deleteTeacher(teacher.id)"></app-list-item>
+      </ng-template>
+
+      <!-- Footer Template -->
+      <div cardFooter>
+        <button class="add-button" (click)="addTeacher()">Add Teacher</button>
+      </div>
+    </app-card>
   `,
   styles: [
     `
-      ::ng-deep .bg-light-red {
-        background-color: rgba(250, 0, 0, 0.1);
+      .teacher-card {
+        @apply bg-gradient-to-br from-red-50 to-white;
+      }
+      .header-content {
+        @apply flex justify-center;
+      }
+      .header-image {
+        @apply rounded-lg object-cover shadow-sm;
+      }
+      .add-button {
+        @apply w-full rounded-md bg-blue-500 px-4 py-2 text-white;
+        @apply transition-colors duration-200 hover:bg-blue-600;
+        @apply disabled:cursor-not-allowed disabled:opacity-50;
       }
     `,
   ],
-  imports: [CardComponent],
+  imports: [CardComponent, ListItemComponent, NgOptimizedImage],
+  standalone: true,
 })
 export class TeacherCardComponent implements OnInit {
   private http = inject(FakeHttpService);
@@ -31,4 +69,12 @@ export class TeacherCardComponent implements OnInit {
   ngOnInit(): void {
     this.http.fetchTeachers$.subscribe((t) => this.store.addAll(t));
   }
+
+  addTeacher() {
+    this.store.addOne(randTeacher());
+  }
+
+  deleteTeacher(id: number) {
+    this.store.deleteOne(id);
+  }
 }

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,52 +1,73 @@
-import { NgOptimizedImage } from '@angular/common';
-import { Component, inject, input } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import {
+  Component,
+  ContentChild,
+  inject,
+  input,
+  TemplateRef,
+} 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';
 
 @Component({
   selector: 'app-card',
   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" />
-      }
+    <div class="card" [class]="customClass()">
+      <!-- Header projection -->
+      <div class="card-header">
+        <ng-content select="[cardHeader]"></ng-content>
+      </div>
 
-      <section>
+      <!-- List section -->
+      <section class="card-content">
         @for (item of list(); track item) {
-          <app-list-item
-            [name]="item.firstName"
-            [id]="item.id"
-            [type]="type()"></app-list-item>
+          <ng-container
+            [ngTemplateOutlet]="itemTemplate"
+            [ngTemplateOutletContext]="{ $implicit: item }"></ng-container>
         }
       </section>
 
-      <button
-        class="rounded-sm border border-blue-500 bg-blue-300 p-2"
-        (click)="addNewItem()">
-        Add
-      </button>
+      <!-- Footer projection -->
+      <div class="card-footer">
+        <ng-content select="[cardFooter]"></ng-content>
+      </div>
     </div>
   `,
-  imports: [ListItemComponent, NgOptimizedImage],
+  styles: [
+    `
+      .card {
+        @apply w-full max-w-sm overflow-hidden rounded-lg border border-gray-200 shadow-md;
+        @apply bg-white transition-all duration-200 hover:shadow-lg;
+      }
+      .card-header {
+        @apply bg-gray-50 p-4;
+      }
+      .card-content {
+        @apply max-h-[300px] space-y-2 overflow-y-auto p-4;
+      }
+      .card-footer {
+        @apply border-t border-gray-100 p-4;
+      }
+    `,
+  ],
+  imports: [NgTemplateOutlet],
+  standalone: true,
 })
 export class CardComponent {
   private teacherStore = inject(TeacherStore);
   private studentStore = inject(StudentStore);
 
-  readonly list = input<any[] | null>(null);
+  readonly list = input.required<any[]>();
   readonly type = input.required<CardType>();
   readonly customClass = input('');
 
   CardType = CardType;
 
+  @ContentChild('itemTemplate', { static: true })
+  itemTemplate!: TemplateRef<any>;
+
   addNewItem() {
     const type = this.type();
     if (type === CardType.TEACHER) {