minor changes

src/app/hotel/component/hotels.component.ts

@@ -0,0 +1,49 @@
+import {Component, inject} from "@angular/core";
+import {HotelComponent} from "./hotel.component";
+import {Hotel} from "../model/hotel";
+import {FormsModule} from "@angular/forms";
+import {Lang} from "../../currency/lang";
+import {HotelService} from "../service/hotel.service";
+import {filter, Observable, toArray} from "rxjs";
+import {AsyncPipe} from "@angular/common";
+import {CurrencyComponent} from "../../currency/currency.component";
+import {RouterLink} from "@angular/router";
+import {StarComponent} from "./star.component";
+
+@Component({
+  standalone: true,
+  template: `
+    <app-currency (currency)="currency = $event"></app-currency>
+    <form>
+      <input name="search" [ngModel]="search" (ngModelChange)="searchEvent($event)">
+    </form>
+    <p routerLink="/hotels/new">Create Hotel</p>
+    @for (hotel of (matchingHotels | async); track hotel.id) {
+      <div>{{hotel.hotelName}}</div>
+      <img src="{{hotel.imageUrl}}" alt="{{hotel.hotelName}}" height="64" width="64">
+      <br>
+      <button routerLink="{{hotel.id}}">Details</button>
+      <hr>
+    } @empty {
+      <h1>no matching results for {{ search }}</h1>
+    }
+  `,
+  imports: [FormsModule, HotelComponent, AsyncPipe, CurrencyComponent, RouterLink, StarComponent],
+  providers: [HotelService],
+  selector: 'app-hotels'
+})
+export class HotelsComponent {
+
+  public currency: Lang = {name: 'de', code: 'de-DE', currency: 'EUR'};
+
+  public search: string = '';
+
+  private hotelService: HotelService= inject(HotelService);
+
+  public matchingHotels: Observable<Hotel[]> = this.hotelService.getHotels();
+
+  public searchEvent(input: string) {
+    this.search = input.toLowerCase();
+
+  }
+}