Answer:1

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

@@ -1,9 +1,39 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import {
+ ChangeDetectionStrategy,
+ Component,
+ inject,
+ Input,
+ 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';
 
 @Component({
  selector: 'app-city-card',
- template: 'TODO City',
- imports: [],
+ template: `
+ <app-card
+ [list]="cities()"
+ [type]="cardType"
+ [onAdd]="addCity"
+ customClass="bg-light-green" />
+ `,
+ imports: [CardComponent],
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class CityCardComponent {}
+export class CityCardComponent implements OnInit {
+ private http = inject(FakeHttpService);
+ private store = inject(CityStore);
+ @Input() list: any[] = [];
+ cities = this.store.cities;
+ cardType = CardType.CITY;
+
+ addCity = () => this.store.addOne(randomCity());
+ ngOnInit(): void {
+ this.http.fetchCities$.subscribe((c) => this.store.addAll(c));
+ }
+}

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

@@ -4,7 +4,10 @@ import {
  inject,
  OnInit,
 } from '@angular/core';
-import { FakeHttpService } from '../../data-access/fake-http.service';
+import {
+ 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';
@@ -15,15 +18,9 @@ import { CardComponent } from '../../ui/card/card.component';
  <app-card
  [list]="students()"
  [type]="cardType"
+ [onAdd]="addStudent"
  customClass="bg-light-green" />
  `,
- styles: [
- `
- ::ng-deep .bg-light-green {
- background-color: rgba(0, 250, 0, 0.1);
- }
- `,
- ],
  imports: [CardComponent],
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -33,6 +30,8 @@ export class StudentCardComponent implements OnInit {
 
  students = this.store.students;
  cardType = CardType.STUDENT;
+ // eslint-disable-next-line @typescript-eslint/no-empty-function
+ addStudent = () => this.store.addOne(randStudent());
 
  ngOnInit(): void {
  this.http.fetchStudents$.subscribe((s) => this.store.addAll(s));

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

@@ -1,5 +1,8 @@
 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';
@@ -10,15 +13,9 @@ import { CardComponent } from '../../ui/card/card.component';
  <app-card
  [list]="teachers()"
  [type]="cardType"
- customClass="bg-light-red"></app-card>
+ [onAdd]="addTeacher"
+ customClass="bg-light-green"></app-card>
  `,
- styles: [
- `
- ::ng-deep .bg-light-red {
- background-color: rgba(250, 0, 0, 0.1);
- }
- `,
- ],
  imports: [CardComponent],
 })
 export class TeacherCardComponent implements OnInit {
@@ -31,4 +28,6 @@ export class TeacherCardComponent implements OnInit {
  ngOnInit(): void {
  this.http.fetchTeachers$.subscribe((t) => this.store.addAll(t));
  }
+
+ addTeacher = () => this.store.addOne(randTeacher());
 }

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/model/city.model.ts

@@ -2,4 +2,5 @@ export interface City {
  id: number;
  name: string;
  country: string;
+ picture?: string;
 }

apps/angular/1-projection/src/app/model/student.model.ts

@@ -6,4 +6,5 @@ export interface Student {
  lastName: string;
  mainTeacher: Teacher;
  school: string;
+ picture?: string;
 }

apps/angular/1-projection/src/app/model/teacher.model.ts

@@ -12,4 +12,5 @@ export interface Teacher {
  firstName: string;
  lastName: string;
  subject: Subject;
+ picture?: string;
 }

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

@@ -1,8 +1,5 @@
-import { NgOptimizedImage } from '@angular/common';
-import { Component, inject, 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 { NgTemplateOutlet } from '@angular/common';
+import { Component, input } from '@angular/core';
 import { CardType } from '../../model/card.model';
 import { ListItemComponent } from '../list-item/list-item.component';
 
@@ -12,19 +9,25 @@ import { ListItemComponent } from '../list-item/list-item.component';
  <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" />
- }
-
+ <img
+ [src]="getImageByType()"
+ [alt]="type()"
+ class="h-32 w-full rounded-md object-cover" />
  <section>
- @for (item of list(); track item) {
+ <!-- On crée le template ici -->
+ <ng-template #cardTemplate let-item>
  <app-list-item
- [name]="item.firstName"
+ [name]="getDisplayName(item)"
  [id]="item.id"
  [type]="type()"></app-list-item>
+ </ng-template>
+ <!-- On assigne le template aux éléments de la liste -->
+ @for (item of list(); track item.id) {
+ <ng-container
+ *ngTemplateOutlet="
+ cardTemplate;
+ context: { $implicit: item }
+ "></ng-container>
  }
  </section>
 
@@ -35,24 +38,31 @@ import { ListItemComponent } from '../list-item/list-item.component';
  </button>
  </div>
  `,
- imports: [ListItemComponent, NgOptimizedImage],
+ imports: [ListItemComponent, NgTemplateOutlet],
 })
 export class CardComponent {
- private teacherStore = inject(TeacherStore);
- private studentStore = inject(StudentStore);
-
  readonly list = input<any[] | null>(null);
  readonly type = input.required<CardType>();
  readonly customClass = input('');
+ readonly onAdd = input.required<() => void>();
+
+ private readonly imageMap: Record<CardType, string> = {
+ [CardType.CITY]: 'assets/img/city.png',
+ [CardType.TEACHER]: 'assets/img/teacher.png',
+ [CardType.STUDENT]: 'assets/img/student.webp',
+ };
 
- CardType = CardType;
+ getImageByType(): string {
+ return this.imageMap[this.type()] ?? 'assets/default.png';
+ }
 
  addNewItem() {
- const type = this.type();
- if (type === CardType.TEACHER) {
- this.teacherStore.addOne(randTeacher());
- } else if (type === CardType.STUDENT) {
- this.studentStore.addOne(randStudent());
- }
+ this.onAdd()();
+ }
+
+ getDisplayName(item: any): string {
+ // Pour les villes : utilise 'name'
+ // Pour teachers/students : utilise 'firstName'
+ return item.name ?? item.firstName ?? 'Unknown';
  }
 }

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,20 @@ import { CardType } from '../../model/card.model';
 export class ListItemComponent {
  private teacherStore = inject(TeacherStore);
  private studentStore = inject(StudentStore);
+ private citiesStore = inject(CityStore);
+
+ private readonly storeMap = {
+ [CardType.TEACHER]: this.teacherStore,
+ [CardType.STUDENT]: this.studentStore,
+ [CardType.CITY]: this.citiesStore,
+ };
 
  readonly id = input.required<number>();
  readonly name = input.required<string>();
  readonly type = input.required<CardType>();
 
- delete(id: number) {
- const type = this.type();
- if (type === CardType.TEACHER) {
- this.teacherStore.deleteOne(id);
- } else if (type === CardType.STUDENT) {
- this.studentStore.deleteOne(id);
- }
+ delete(id: number): void {
+ const store = this.storeMap[this.type()];
+ store?.deleteOne(id);
  }
 }

apps/angular/1-projection/src/styles.scss

@@ -1,3 +1,9 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer utilities {
+ .bg-light-green {
+ background-color: rgba(0, 250, 0, 0.1);
+ }
+}