idek man ausbildungsnachweise fucking me up frfr ong

src/app/hotel/hotels.component.ts

@@ -4,81 +4,40 @@ import {Hotel} from "./hotel";
 import {FormsModule} from "@angular/forms";
 import {Lang} from "../idek/lang";
 import {HotelService} from "../service/hotel.service";
+import {Observable} from "rxjs";
+import {AsyncPipe} from "@angular/common";
+import {CurrencyComponent} from "../currency/currency.component";
 
 @Component({
   standalone: true,
   template: `
-    <select [ngModel]="currency" (ngModelChange)="setCurrency($event)">
-      @for (currency of currencies; track null) {
-        <option value="{{currency.name}}">{{currency.name}}</option>
-      }
-    </select>
+    <app-currency (currency)="currency = $event"></app-currency>
     <form>
       <input name="search" [ngModel]="search" (ngModelChange)="searchEvent($event)">
     </form>
-    @for (hotel of matchingHotels; track hotel.hotelId) {
+    @for (hotel of (matchingHotels | async); track hotel.hotelId) {
         <app-hotel [hotel]="hotel" [currency]="currency"></app-hotel>
         <hr>
     } @empty {
       <h1>no matching results for {{search}}</h1>
     }
   `,
-  imports: [FormsModule, HotelComponent],
+  imports: [FormsModule, HotelComponent, AsyncPipe, CurrencyComponent],
   providers: [HotelService],
   selector: 'app-hotels'
 })
 export class HotelsComponent {
-  public search: string = '';
 
   public currency: Lang = {name: 'de', code: 'de-DE', currency: 'EUR'};
 
-  public currencies: Lang[] = [
-    {
-      name: 'de',
-      code: 'de-DE',
-      currency: 'EUR'
-    },
-    {
-      name: 'en',
-      code: 'en-US',
-      currency: 'USD'
-    },
-    {
-      name: 'jap',
-      code: 'ja-JP',
-      currency: 'JPY'
-    },
-    {
-      name: 'cn',
-      code: 'cn-CN',
-      currency: 'CNY'
-    }
-  ]
+  public search: string = '';
 
-  public matchingHotels: Hotel[] = [];
+  private hotelService: HotelService= inject(HotelService);
 
-  private hotelService: HotelService = inject(HotelService);
-
-  constructor() {
-    this.matchingHotels = this.hotelService.getHotels;
-  }
-
-  public setCurrency(currencyInput: string): void {
-    for (const currency of this.currencies) {
-      if (currency.name === currencyInput) {
-        this.currency = currency;
-        break;
-      }
-    }
-  }
+  public matchingHotels: Observable<Hotel[]> = this.hotelService.getHotels();
 
   public searchEvent(input: string) {
     this.search = input.toLowerCase();
-    this.matchingHotels = []
-    this.hotelService.getHotels .forEach((hotel: Hotel) => {
-      if (hotel.hotelName.toLowerCase().includes(this.search)) {
-          this.matchingHotels.push(hotel);
-      }
-    })
+    //this.matchingHotels.pipe(filter((hotel: Hotel) => hotel.hotelName.toLowerCase().includes(input.toLowerCase())));
   }
 }