Catch error

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

@@ -1,13 +1,57 @@
 import { Component, OnInit } from '@angular/core';
+import { FakeHttpService, randomCity, randTeacher } from '../../data-access/fake-http.service';
+import { CardComponent } from '../../ui/card/card.component';
+import { City } from '../../model/city.model';
+import { CityStore } from '../../data-access/city.store';
+import { ListItemComponent } from '../../ui/list-item/list-item.component';
 
 @Component({
   selector: 'app-city-card',
-  template: 'TODO City',
+  template: `
+    <app-card
+      [list]="cities"
+      (addItem)="onAddItem()"
+      customClass="bg-light-orange">
+      <img src="assets/img/city.png" width="200px"/>
+
+      <ng-template #listItem let-item>
+        <app-list-item
+          [name]="item.name"
+          [id]="item.id"
+          (deleteItem)="onDeleteItem(item.id)"
+        >
+        </app-list-item>
+      </ng-template>
+    </app-card>
+  `,
+  styles: [
+    `
+      ::ng-deep .bg-light-orange {
+        background-color: orange;
+      }
+    `,
+  ],
   standalone: true,
-  imports: [],
+  imports: [CardComponent, ListItemComponent],
 })
 export class CityCardComponent implements OnInit {
-  constructor() {}
+  cities: City[] = [];
+
+  constructor(
+    private http: FakeHttpService,
+    private store: CityStore,
+  ) {}
+
+  ngOnInit(): void {
+    this.http.fetchCities$.subscribe((t) => this.store.addAll(t));
+
+    this.store.cities$.subscribe((t) => (this.cities = t));
+  }
+  onAddItem(){
+    this.store.addOne(randomCity());
+  }
 
-  ngOnInit(): void {}
+  onDeleteItem(id: number){
+    this.store.deleteOne(id);
+  }
 }

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

@@ -1,17 +1,28 @@
 import { Component, 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 { Student } from '../../model/student.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>
+      (addItem)="onAddItem()"
+      customClass="bg-light-green">
+      <img src="assets/img/student.webp"width="200px" />
+
+      <ng-template #listItem let-item>
+        <app-list-item
+          [name]="item.firstName"
+          [id]="item.id"
+          (deleteItem)="onDeleteItem(item.id)"
+        >
+        </app-list-item>
+      </ng-template>
+    </app-card>
   `,
   standalone: true,
   styles: [
@@ -21,11 +32,10 @@ import { CardComponent } from '../../ui/card/card.component';
       }
     `,
   ],
-  imports: [CardComponent],
+  imports: [CardComponent, ListItemComponent],
 })
 export class StudentCardComponent implements OnInit {
   students: Student[] = [];
-  cardType = CardType.STUDENT;
 
   constructor(
     private http: FakeHttpService,
@@ -37,4 +47,12 @@ export class StudentCardComponent implements OnInit {
 
     this.store.students$.subscribe((s) => (this.students = s));
   }
+
+  onAddItem(){
+    this.store.addOne(randStudent());
+  }
+
+  onDeleteItem(id: number){
+    this.store.deleteOne(id);
+  }
 }

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

@@ -1,17 +1,29 @@
 import { Component, 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 { Teacher } from '../../model/teacher.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>
+      (addItem)="onAddItem()"
+      customClass="bg-light-red">
+      <img src="assets/img/teacher.png" width="200px" #avatar/>
+
+      <ng-template #listItem let-item>
+        <app-list-item
+          [name]="item.firstName"
+          [id]="item.id"
+          (deleteItem)="onDeleteItem(item.id)"
+        >
+        </app-list-item>
+      </ng-template>
+
+    </app-card>
   `,
   styles: [
     `
@@ -21,11 +33,10 @@ import { CardComponent } from '../../ui/card/card.component';
     `,
   ],
   standalone: true,
-  imports: [CardComponent],
+  imports: [CardComponent, ListItemComponent],
 })
 export class TeacherCardComponent implements OnInit {
   teachers: Teacher[] = [];
-  cardType = CardType.TEACHER;
 
   constructor(
     private http: FakeHttpService,
@@ -37,4 +48,11 @@ export class TeacherCardComponent implements OnInit {
 
     this.store.teachers$.subscribe((t) => (this.teachers = t));
   }
+  onAddItem(){
+    this.store.addOne(randTeacher());
+  }
+
+  onDeleteItem(id: number){
+    this.store.deleteOne(id);
+  }
 }

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

@@ -1,33 +1,22 @@
-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 { CommonModule, NgFor, NgIf } from '@angular/common';
+import { Component, Input, Output, EventEmitter, ViewChild, TemplateRef, ContentChild } 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>
+      <ng-content ></ng-content>
+
+      <ng-container *ngFor="let item of list">
+        <ng-template
+          [ngTemplateOutlet]="listItem"
+          [ngTemplateOutletContext]="{ $implicit: item}"
+        >
+        </ng-template>
+      </ng-container>
 
       <button
         class="rounded-sm border border-blue-500 bg-blue-300 p-2"
@@ -37,25 +26,18 @@ import { ListItemComponent } from '../list-item/list-item.component';
     </div>
   `,
   standalone: true,
-  imports: [NgIf, NgFor, ListItemComponent],
+  imports: [NgIf, NgFor, CommonModule],
 })
 export class CardComponent {
   @Input() list: any[] | null = null;
-  @Input() type!: CardType;
   @Input() customClass = '';
+  @Output() addItem:  EventEmitter<void> = new EventEmitter<void>()
+  @Output() deleteItem:  EventEmitter<number> = new EventEmitter<number>()
+  @ContentChild('listItem') listItem!: TemplateRef<any>;
 
-  CardType = CardType;
-
-  constructor(
-    private teacherStore: TeacherStore,
-    private studentStore: StudentStore,
-  ) {}
+  constructor() {}
 
   addNewItem() {
-    if (this.type === CardType.TEACHER) {
-      this.teacherStore.addOne(randTeacher());
-    } else if (this.type === CardType.STUDENT) {
-      this.studentStore.addOne(randStudent());
-    }
+    this.addItem.emit()
   }
 }

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

@@ -1,14 +1,11 @@
-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, Input, Output, EventEmitter } 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)">
+      <button (click)="delete()">
         <img class="h-5" src="assets/svg/trash.svg" />
       </button>
     </div>
@@ -18,18 +15,10 @@ import { CardType } from '../../model/card.model';
 export class ListItemComponent {
   @Input() id!: number;
   @Input() name!: string;
-  @Input() type!: CardType;
+  @Output() deleteItem = new EventEmitter()
 
-  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);
-    }
+  constructor() {}
+  delete() {
+    this.deleteItem.emit()
   }
 }

apps/angular/21-anchor-navigation/src/app/app.component.ts

@@ -1,9 +1,9 @@
 import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
+import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
 
 @Component({
   standalone: true,
-  imports: [RouterOutlet],
+  imports: [RouterOutlet,RouterLink, RouterLinkActive],
   selector: 'app-root',
   template: `
     <router-outlet></router-outlet>

apps/angular/21-anchor-navigation/src/app/app.config.ts

@@ -1,6 +1,13 @@
 import { ApplicationConfig } from '@angular/core';
-import { provideRouter } from '@angular/router';
+import { provideRouter,withInMemoryScrolling, InMemoryScrollingOptions } from '@angular/router';
 import { appRoutes } from './app.routes';
 export const appConfig: ApplicationConfig = {
-  providers: [provideRouter(appRoutes)],
+  providers: [
+    provideRouter(
+      appRoutes,
+      withInMemoryScrolling({
+        anchorScrolling: 'enabled',
+        scrollPositionRestoration: 'enabled',
+      })
+    )],
 };

apps/angular/21-anchor-navigation/src/app/home.component.ts

@@ -9,11 +9,11 @@ import { NavButtonComponent } from './nav-button.component';
     <nav-button href="/foo" class="fixed left-1/2 top-3">Foo Page</nav-button>
     <div id="top" class="h-screen bg-gray-500">
       Empty
-      <nav-button href="#bottom">Scroll Bottom</nav-button>
+      <nav-button anchor="bottom">Scroll Bottom</nav-button>
     </div>
     <div id="bottom" class="h-screen bg-blue-300">
       I want to scroll each
-      <nav-button href="#top">Scroll Top</nav-button>
+      <nav-button anchor="top">Scroll Top</nav-button>
     </div>
   `,
 })

apps/angular/21-anchor-navigation/src/app/nav-button.component.ts

@@ -1,10 +1,12 @@
 /* eslint-disable @angular-eslint/component-selector */
 import { Component, Input } from '@angular/core';
+import { RouterLink, RouterLinkWithHref } from '@angular/router';
 @Component({
   selector: 'nav-button',
   standalone: true,
+  imports: [RouterLink],
   template: `
-    <a [href]="href">
+    <a [routerLink]="href" [fragment]="anchor">
       <ng-content></ng-content>
     </a>
   `,
@@ -14,4 +16,5 @@ import { Component, Input } from '@angular/core';
 })
 export class NavButtonComponent {
   @Input() href = '';
+  @Input() anchor?: string = undefined;
 }

apps/angular/21-anchor-navigation/src/index.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" class="scroll-smooth">
   <head>
     <meta charset="utf-8" />
     <title>angular-anchor-navigation</title>

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/app.routes.ts

@@ -6,7 +6,7 @@ export const appRoutes: Route[] = [
     loadComponent: () => import('./home.component'),
   },
   {
-    path: 'subscription/:testId',
+    path: 'subscription/:id',
     loadComponent: () => import('./test.component'),
     data: {
       permission: 'admin',