Answer:1 projection solution

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

@@ -1,13 +1,64 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, inject } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { switchMap, tap } from 'rxjs';
+import { CityStore } from '../../data-access/city.store';
+import {
+ FakeHttpService,
+ randomCity,
+} from '../../data-access/fake-http.service';
+import { City } from '../../model/city.model';
+import { CardListItemDirective } from '../../ui/card/card-list-item.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()"
+ class="bg-light-blue"
+ (addedItem)="addNewCity()">
+ <img image src="assets/img/city.png" width="200px" />
+ <ng-template appCardListItem let-item>
+ <app-list-item (deletedItem)="deleteCity(item.id)">
+ <div description>
+ {{ item.name }}
+ </div>
+ </app-list-item>
+ </ng-template>
+ </app-card>
+ `,
  standalone: true,
- imports: [],
+ styles: [
+ `
+ .bg-light-blue {
+ background-color: rgba(0, 0, 250, 0.1);
+ }
+ `,
+ ],
+ imports: [CardComponent, ListItemComponent, CardListItemDirective],
 })
-export class CityCardComponent implements OnInit {
- constructor() {}
+export class CityCardComponent {
+ http = inject(FakeHttpService);
+ store = inject(CityStore);
 
- ngOnInit(): void {}
+ cities = toSignal(
+ this.http.fetchCities$.pipe(
+ tap((cities) => {
+ this.store.addAll(cities);
+ }),
+ switchMap(() => {
+ return this.store.cities$;
+ }),
+ ),
+ { initialValue: [] as City[] },
+ );
+
+ addNewCity(): void {
+ this.store.addOne(randomCity());
+ }
+
+ deleteCity(id: number) {
+ this.store.deleteOne(id);
+ }
 }

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

@@ -1,40 +1,64 @@
-import { Component, OnInit } from '@angular/core';
-import { FakeHttpService } from '../../data-access/fake-http.service';
+import { Component, inject } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { switchMap, tap } from 'rxjs';
+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 { CardListItemDirective } from '../../ui/card/card-list-item.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()"
+ class="bg-light-green"
+ (addedItem)="addNewStudent()">
+ <img image src="assets/img/student.webp" width="200px" />
+ <ng-template appCardListItem let-item>
+ <app-list-item (deletedItem)="deleteStudent(item.id)">
+ <div description>
+ {{ item.firstname }}
+ </div>
+ </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, ListItemComponent, CardListItemDirective],
 })
-export class StudentCardComponent implements OnInit {
- students: Student[] = [];
- cardType = CardType.STUDENT;
+export class StudentCardComponent {
+ http = inject(FakeHttpService);
+ store = inject(StudentStore);
 
- constructor(
- private http: FakeHttpService,
- private store: StudentStore,
- ) {}
+ students = toSignal(
+ this.http.fetchStudents$.pipe(
+ tap((students) => {
+ this.store.addAll(students);
+ }),
+ switchMap(() => {
+ return this.store.students$;
+ }),
+ ),
+ { initialValue: [] as Student[] },
+ );
 
- ngOnInit(): void {
- this.http.fetchStudents$.subscribe((s) => this.store.addAll(s));
+ addNewStudent(): void {
+ this.store.addOne(randStudent());
+ }
 
- this.store.students$.subscribe((s) => (this.students = s));
+ deleteStudent(id: number) {
+ this.store.deleteOne(id);
  }
 }

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

@@ -1,40 +1,64 @@
-import { Component, OnInit } from '@angular/core';
-import { FakeHttpService } from '../../data-access/fake-http.service';
+import { Component, inject } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { switchMap, tap } from 'rxjs';
+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 { CardListItemDirective } from '../../ui/card/card-list-item.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()"
+ class="bg-light-red"
+ (addedItem)="addNewTeacher()">
+ <img image src="assets/img/teacher.png" width="200px" />
+ <ng-template appCardListItem let-item>
+ <app-list-item (deletedItem)="deleteTeacher(item.id)">
+ <div description>
+ {{ item.firstname }}
+ </div>
+ </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, ListItemComponent, CardListItemDirective],
 })
-export class TeacherCardComponent implements OnInit {
- teachers: Teacher[] = [];
- cardType = CardType.TEACHER;
+export class TeacherCardComponent {
+ http = inject(FakeHttpService);
+ store = inject(TeacherStore);
 
- constructor(
- private http: FakeHttpService,
- private store: TeacherStore,
- ) {}
+ teachers = toSignal(
+ this.http.fetchTeachers$.pipe(
+ tap((teachers) => {
+ this.store.addAll(teachers);
+ }),
+ switchMap(() => {
+ return this.store.teachers$;
+ }),
+ ),
+ { initialValue: [] as Teacher[] },
+ );
 
- ngOnInit(): void {
- this.http.fetchTeachers$.subscribe((t) => this.store.addAll(t));
+ addNewTeacher(): void {
+ this.store.addOne(randTeacher());
+ }
 
- this.store.teachers$.subscribe((t) => (this.teachers = t));
+ deleteTeacher(id: number) {
+ this.store.deleteOne(id);
  }
 }

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

@@ -13,8 +13,8 @@ export class CityStore {
  this.cities.next(cities);
  }
 
- addOne(student: City) {
- this.cities.next([...this.cities.value, student]);
+ addOne(city: City) {
+ this.cities.next([...this.cities.value, city]);
  }
 
  deleteOne(id: number) {

apps/angular/projection/src/app/data-access/fake-http.service.ts

@@ -18,8 +18,8 @@ const factoryTeacher = incrementalNumber();
 
 export const randTeacher = () => ({
  id: factoryTeacher(),
- firstName: randFirstName(),
- lastName: randLastName(),
+ firstname: randFirstName(),
+ lastname: randLastName(),
  subject: rand(subject),
 });
 
@@ -34,9 +34,9 @@ const factoryStudent = incrementalNumber();
 
 export const randStudent = (): Student => ({
  id: factoryStudent(),
- firstName: randFirstName(),
- lastName: randLastName(),
- mainTeacher: teachers[randNumber({ max: teachers.length - 1 })],
+ firstname: randFirstName(),
+ lastname: randLastName(),
+ mainTeacher: teachers[randNumber({ max: teachers.length })],
  school: randWord(),
 });
 

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

@@ -2,8 +2,8 @@ import { Teacher } from './teacher.model';
 
 export interface Student {
  id: number;
- firstName: string;
- lastName: string;
+ firstname: string;
+ lastname: string;
  mainTeacher: Teacher;
  school: string;
 }

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

@@ -9,7 +9,7 @@ export type Subject = (typeof subject)[number];
 
 export interface Teacher {
  id: number;
- firstName: string;
- lastName: string;
+ firstname: string;
+ lastname: string;
  subject: Subject;
 }

apps/angular/projection/src/app/ui/card/card-list-item.directive.ts

@@ -0,0 +1,7 @@
+import { Directive } from '@angular/core';
+
+@Directive({
+ selector: '[appCardListItem]',
+ standalone: true,
+})
+export class CardListItemDirective {}

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

@@ -1,61 +1,46 @@
-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 { CommonModule } from '@angular/common';
+import {
+ Component,
+ ContentChild,
+ EventEmitter,
+ Input,
+ Output,
+ TemplateRef,
+} from '@angular/core';
 import { ListItemComponent } from '../list-item/list-item.component';
+import { CardListItemDirective } from './card-list-item.directive';
 
 @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" />
+ <ng-content select="[image]"></ng-content>
+ <section>
+ @for (item of list; track item) {
+ <ng-template
+ [ngTemplateOutlet]="rowTemplate"
+ [ngTemplateOutletContext]="{ $implicit: item }"></ng-template>
+ }
+ </section>
 
- <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>
- </div>
+ <button
+ class="rounded-sm border border-blue-500 bg-blue-300 p-2"
+ (click)="addedNewItem()">
+ Add
+ </button>
  `,
+ host: {
+ class: 'border-2 border-black rounded-md p-4 w-fit flex flex-col gap-3',
+ },
  standalone: true,
- imports: [NgIf, NgFor, ListItemComponent],
+ imports: [ListItemComponent, CommonModule, CardListItemDirective],
 })
-export class CardComponent {
- @Input() list: any[] | null = null;
- @Input() type!: CardType;
- @Input() customClass = '';
-
- CardType = CardType;
-
- constructor(
- private teacherStore: TeacherStore,
- private studentStore: StudentStore,
- ) {}
+export class CardComponent<T> {
+ @Input() list: T[] | null = null;
+ @Output() addedItem = new EventEmitter<void>();
+ @ContentChild(CardListItemDirective, { read: TemplateRef })
+ rowTemplate!: TemplateRef<{ $implicit: any }>;
 
- addNewItem() {
- if (this.type === CardType.TEACHER) {
- this.teacherStore.addOne(randTeacher());
- } else if (this.type === CardType.STUDENT) {
- this.studentStore.addOne(randStudent());
- }
+ addedNewItem() {
+ this.addedItem.emit();
  }
 }