solution

Author: manfredsteyer

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

@@ -0,0 +1,4 @@
+.error-message {
+    margin-bottom: 20px;
+    color: darkred;
+}

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

@@ -2,3 +2,25 @@ <h1>Flight Edit</h1>
 
 <p>Id: {{ id() }}</p>
 <p>ShowDetails: {{ showDetails() }}</p>
+
+@if (error()) {
+<div class="error-message">{{ error() }}</div>
+}
+
+<form>
+  <div class="form-group">
+    <label>From:</label>
+    <input [(ngModel)]="from" name="from" class="form-control" />
+  </div>
+  <div class="form-group">
+    <label>From:</label>
+    <input [(ngModel)]="to" name="to" class="form-control" />
+  </div>
+  <div class="form-group">
+    <label>From:</label>
+    <input [(ngModel)]="date" name="date" size="40" class="form-control" />
+  </div>
+  <div class="form-group">
+    <button class="btn btn-default" (click)="save()">Save</button>
+  </div>
+</form>

src/app/flight-edit/flight-edit.component.ts

@@ -1,17 +1,64 @@
-import { booleanAttribute, Component, input, numberAttribute, OnInit } from '@angular/core';
+import {
+  booleanAttribute,
+  Component,
+  inject,
+  input,
+  numberAttribute,
+  OnInit,
+  signal,
+} from '@angular/core';
+import { FlightService } from '../flight.service';
+import { Flight } from '../data/flight';
+import { FormsModule } from '@angular/forms';
 
 @Component({
   selector: 'app-flight-edit',
-  imports: [],
+  imports: [FormsModule],
   templateUrl: './flight-edit.component.html',
-  styleUrl: './flight-edit.component.css'
+  styleUrl: './flight-edit.component.css',
 })
 export class FlightEditComponent implements OnInit {
+  private flightService = inject(FlightService);
 
   id = input.required({ transform: numberAttribute });
   showDetails = input.required({ transform: booleanAttribute });
 
+  from = signal('');
+  to = signal('');
+  date = signal('');
+
+  error = signal('');
+
   ngOnInit(): void {
-    console.log('id', this.id())
+    this.flightService.findById(this.id()).subscribe((flight) => {
+      this.setFlight(flight);
+    });
+  }
+
+  private setFlight(flight: Flight) {
+    this.from.set(flight.from);
+    this.to.set(flight.to);
+    this.date.set(flight.date);
+  }
+
+  save(): void {
+    this.error.set('');
+
+    const flight: Flight = {
+      id: this.id(),
+      from: this.from(),
+      to: this.to(),
+      date: this.date(),
+    };
+
+    this.flightService.save(flight).subscribe({
+      next: (flight) => {
+        this.setFlight(flight);
+      },
+      error: (err) => {
+        this.error.set(err.error ?? err.message ?? err);
+        throw err;
+      }
+    });
   }
 }

src/app/flight.service.ts

@@ -3,6 +3,8 @@ import { inject, Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 import { Flight } from './data/flight';
 
+const url = 'https://demo.angulararchitects.io/api/flight';
+
 @Injectable({
   providedIn: 'root'
 })
@@ -16,9 +18,25 @@ export class FlightService {
       accept: 'application/json'
     };
 
-    const url = 'https://demo.angulararchitects.io/api/flight';
-
     return this.http.get<Flight[]>(url, { params, headers });
   }
 
+  findById(id: number): Observable<Flight> {
+    const params = { id };
+
+    const headers = {
+      accept: 'application/json'
+    };
+
+    return this.http.get<Flight>(url, { params, headers });
+  }
+
+  save(flight: Flight): Observable<Flight> {
+    const headers = {
+      accept: 'application/json'
+    };
+
+    return this.http.post<Flight>(url, flight, { headers });
+  }
+
 }