Answer: 31

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

@@ -1,9 +1,33 @@
-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"
+      backgroundColor="rgba(39, 85, 129, 0.1)" />
+  `,
+  imports: [CardComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-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));
+  }
+}

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

@@ -15,15 +15,8 @@ import { CardComponent } from '../../ui/card/card.component';
     <app-card
       [list]="students()"
       [type]="cardType"
-      customClass="bg-light-green" />
+      backgroundColor="rgba(0, 250, 0, 0.1)" />
   `,
-  styles: [
-    `
-      ::ng-deep .bg-light-green {
-        background-color: rgba(0, 250, 0, 0.1);
-      }
-    `,
-  ],
   imports: [CardComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

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

@@ -10,15 +10,8 @@ import { CardComponent } from '../../ui/card/card.component';
     <app-card
       [list]="teachers()"
       [type]="cardType"
-      customClass="bg-light-red"></app-card>
+      backgroundColor="rgba(250, 0, 0, 0.1)"></app-card>
   `,
-  styles: [
-    `
-      ::ng-deep .bg-light-red {
-        background-color: rgba(250, 0, 0, 0.1);
-      }
-    `,
-  ],
   imports: [CardComponent],
 })
 export class TeacherCardComponent implements OnInit {

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,6 +1,11 @@
 import { NgOptimizedImage } from '@angular/common';
-import { Component, inject, input } from '@angular/core';
-import { randStudent, randTeacher } from '../../data-access/fake-http.service';
+import { Component, computed, inject, input } from '@angular/core';
+import { CityStore } from '../../data-access/city.store';
+import {
+  randomCity,
+  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';
@@ -11,18 +16,13 @@ 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()">
-      @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" />
-      }
+      [style.backgroundColor]="backgroundColor()">
+      <img [ngSrc]="imageSrc()" width="200" height="200" />
 
       <section>
         @for (item of list(); track item) {
           <app-list-item
-            [name]="item.firstName"
+            [name]="itemName(item)"
             [id]="item.id"
             [type]="type()"></app-list-item>
         }
@@ -40,19 +40,39 @@ import { ListItemComponent } from '../list-item/list-item.component';
 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>();
-  readonly customClass = input('');
+  readonly backgroundColor = input('');
 
   CardType = CardType;
 
+  addHandler: Record<CardType, () => void> = {
+    [CardType.TEACHER]: () => this.teacherStore.addOne(randTeacher()),
+    [CardType.STUDENT]: () => this.studentStore.addOne(randStudent()),
+    [CardType.CITY]: () => this.cityStore.addOne(randomCity()),
+  };
+
+  nameLookup: Record<CardType, (item: any) => string> = {
+    [CardType.TEACHER]: (item: any) => item.firstName,
+    [CardType.STUDENT]: (item: any) => item.firstName,
+    [CardType.CITY]: (item: any) => item.name,
+  };
+
   addNewItem() {
-    const type = this.type();
-    if (type === CardType.TEACHER) {
-      this.teacherStore.addOne(randTeacher());
-    } else if (type === CardType.STUDENT) {
-      this.studentStore.addOne(randStudent());
-    }
+    this.addHandler[this.type()]();
+  }
+
+  itemName(item: any) {
+    return this.nameLookup[this.type()](item);
   }
+
+  imageLookup: Record<CardType, string> = {
+    [CardType.TEACHER]: 'assets/img/teacher.png',
+    [CardType.STUDENT]: 'assets/img/student.webp',
+    [CardType.CITY]: 'assets/img/city.png',
+  };
+
+  imageSrc = computed(() => this.imageLookup[this.type()]);
 }

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,19 @@ 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>();
   readonly type = input.required<CardType>();
 
+  deleteItem: Record<CardType, (id: number) => void> = {
+    [CardType.TEACHER]: (id: number) => this.teacherStore.deleteOne(id),
+    [CardType.STUDENT]: (id: number) => this.studentStore.deleteOne(id),
+    [CardType.CITY]: (id: number) => this.cityStore.deleteOne(id),
+  };
+
   delete(id: number) {
-    const type = this.type();
-    if (type === CardType.TEACHER) {
-      this.teacherStore.deleteOne(id);
-    } else if (type === CardType.STUDENT) {
-      this.studentStore.deleteOne(id);
-    }
+    this.deleteItem[this.type()](id);
   }
 }

apps/angular/22-router-input/src/app/app.config.ts

@@ -1,7 +1,7 @@
 import { ApplicationConfig } from '@angular/core';
-import { provideRouter } from '@angular/router';
+import { provideRouter, withComponentInputBinding } from '@angular/router';
 import { appRoutes } from './app.routes';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideRouter(appRoutes)],
+  providers: [provideRouter(appRoutes, withComponentInputBinding())],
 };

apps/angular/22-router-input/src/app/test.component.ts

@@ -1,21 +1,15 @@
-import { AsyncPipe } from '@angular/common';
-import { Component, inject } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { map } from 'rxjs';
+import { Component, Input } from '@angular/core';
 
 @Component({
   selector: 'app-subscription',
-  imports: [AsyncPipe],
   template: `
-    <div>TestId: {{ testId$ | async }}</div>
-    <div>Permission: {{ permission$ | async }}</div>
-    <div>User: {{ user$ | async }}</div>
+    <div>TestId: {{ testId }}</div>
+    <div>Permission: {{ permission }}</div>
+    <div>User: {{ user }}</div>
   `,
 })
 export default class TestComponent {
-  private activatedRoute = inject(ActivatedRoute);
-
-  testId$ = this.activatedRoute.params.pipe(map((p) => p['testId']));
-  permission$ = this.activatedRoute.data.pipe(map((d) => d['permission']));
-  user$ = this.activatedRoute.queryParams.pipe(map((q) => q['user']));
+  @Input() testId!: string | number;
+  @Input() permission!: string;
+  @Input() user: string | null = null;
 }

apps/angular/31-module-to-standalone/src/app/app.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { RouterLink, RouterOutlet } from '@angular/router';
 
 @Component({
   selector: 'app-root',
@@ -25,6 +26,7 @@ import { Component } from '@angular/core';
   host: {
     class: 'flex flex-col p-4 gap-3',
   },
-  standalone: false,
+  standalone: true,
+  imports: [RouterLink, RouterOutlet],
 })
 export class AppComponent {}

apps/angular/31-module-to-standalone/src/app/app.config.ts

@@ -0,0 +1,11 @@
+import { provideToken } from '@angular-challenges/module-to-standalone/core/providers';
+import { ApplicationConfig } from '@angular/core';
+import { provideRouter, withComponentInputBinding } from '@angular/router';
+import { appRoutes } from 'libs/module-to-standalone/shell/src/lib/main-shell.routes';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideRouter(appRoutes, withComponentInputBinding()),
+    provideToken('main-shell-token'),
+  ],
+};

apps/angular/31-module-to-standalone/src/main.ts

@@ -1,6 +1,5 @@
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { AppModule } from './app/app.module';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app/app.component';
+import { appConfig } from './app/app.config';
 
-platformBrowserDynamic()
-  .bootstrapModule(AppModule)
-  .catch((err) => console.error(err));
+bootstrapApplication(AppComponent, appConfig).catch((e) => console.error(e));