43 lines
1.4 KiB
TypeScript
43 lines
1.4 KiB
TypeScript
import {Component, inject} from "@angular/core";
|
|
import {HotelComponent} from "./hotel.component";
|
|
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: `
|
|
<app-currency (currency)="currency = $event"></app-currency>
|
|
<form>
|
|
<input name="search" [ngModel]="search" (ngModelChange)="searchEvent($event)">
|
|
</form>
|
|
@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, AsyncPipe, CurrencyComponent],
|
|
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();
|
|
//this.matchingHotels.pipe(filter((hotel: Hotel) => hotel.hotelName.toLowerCase().includes(input.toLowerCase())));
|
|
}
|
|
}
|