solution

Author: manfredsteyer

src/app/app.component.html

@@ -1,12 +1,16 @@
 import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
+import { FlightSearchComponent } from './flight-search/flight-search.component';
+import { RouterLink, RouterOutlet } from '@angular/router';
 
 @Component({
   selector: 'app-root',
-  imports: [RouterOutlet],
+  imports: [
+    RouterOutlet,
+    RouterLink,
+  ],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css'
 })
 export class AppComponent {
-  title = 'flight-app';
+  title = 'Hallo Welt!';
 }

src/app/app.component.ts

@@ -1,8 +1,16 @@
 import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
-import { provideRouter } from '@angular/router';
+import { provideRouter, withComponentInputBinding } from '@angular/router';
 
 import { routes } from './app.routes';
+import { provideHttpClient } from '@angular/common/http';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)]
+  providers: [
+    provideZoneChangeDetection({ eventCoalescing: true }), 
+    provideRouter(
+      routes,
+      withComponentInputBinding()
+    ),
+    provideHttpClient(),
+  ]
 };

src/app/app.config.ts

@@ -1,3 +1,33 @@
 import { Routes } from '@angular/router';
+import { HomeComponent } from './home/home.component';
+import { FlightSearchComponent } from './flight-search/flight-search.component';
+import { PassengerSearchComponent } from './passenger-search/passenger-search.component';
+import { FlightEditComponent } from './flight-edit/flight-edit.component';
 
-export const routes: Routes = [];
+export const routes: Routes = [
+    {
+        path: '',
+        pathMatch: 'full',
+        redirectTo: 'home'
+    },
+    {
+        path: 'home',
+        component: HomeComponent
+    },
+    {
+        path: 'flight-search',
+        component: FlightSearchComponent,
+    },
+    {
+        path: 'flight-edit/:id',
+        component: FlightEditComponent
+    },
+    {
+        path: 'passenger-search',
+        component: PassengerSearchComponent
+    },
+    {
+        path: '**',
+        redirectTo: 'home'
+    }
+];

src/app/app.routes.ts

@@ -0,0 +1,14 @@
+
+export interface Flight {
+    id: number; 
+    from: string;
+    to: string;
+    date: string;
+}
+
+export const initFlight: Flight = {
+    id: 0,
+    from: '',
+    to: '',
+    date: ''
+};

src/app/data/flight.ts

@@ -0,0 +1,17 @@
+@let flight = item();
+
+<div class="card" [class.selected]="selected()">
+  <div class="card-header">
+    <h2 class="title"> {{flight.from}} - {{flight.to}} </h2>
+  </div>
+
+  <div class="card-body">
+    <p>Flight-No.: {{flight.id}}</p>
+    <p>Date: {{flight.date | date: 'dd.MM.yyyy HH:mm' }}</p>
+    <p>
+      <button (click)="select()" class="btn btn-default">Select</button>
+      <button (click)="unselect()" class="btn btn-default">Remove</button>
+      <button [routerLink]="['/flight-edit', flight.id, {showDetails: true}]" class="btn btn-default">Edit</button>
+    </p>
+  </div>
+</div>

src/app/flight-card/flight-card.component.css

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FlightCardComponent } from './flight-card.component';
+
+describe('FlightCardComponent', () => {
+  let component: FlightCardComponent;
+  let fixture: ComponentFixture<FlightCardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FlightCardComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(FlightCardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/flight-card/flight-card.component.html

@@ -0,0 +1,27 @@
+import { Component, input, model, output } from '@angular/core';
+import { Flight } from '../data/flight';
+import { DatePipe } from '@angular/common';
+import { RouterLink } from '@angular/router';
+
+@Component({
+  selector: 'app-flight-card',
+  imports: [DatePipe, RouterLink],
+  templateUrl: './flight-card.component.html',
+  styleUrl: './flight-card.component.css'
+})
+export class FlightCardComponent {
+
+  item = input.required<Flight>();
+  // selected = input.required<boolean>();
+  // selectedChange = output<boolean>();
+  selected = model.required<boolean>();
+
+  select(): void {
+    this.selected.set(true);
+  }
+
+  unselect(): void {
+    this.selected.set(false);
+  }
+
+}