68 lines
1.9 KiB
TypeScript
68 lines
1.9 KiB
TypeScript
import { ChangeDetectionStrategy, 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 { Observable } from 'rxjs';
|
|
import { AsyncPipe, NgIf } 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 *ngIf="hotel.hotelName.toLowerCase().includes(search)">
|
|
<div>{{ hotel.hotelName }}</div>
|
|
<img
|
|
src="{{ hotel.imageUrl }}"
|
|
alt="{{ hotel.hotelName }}"
|
|
height="64"
|
|
width="64"
|
|
/>
|
|
<br />
|
|
<button routerLink="{{ hotel.id }}">Details</button>
|
|
<hr />
|
|
</div>
|
|
} @empty {
|
|
<h1>no matching results for {{ search }}</h1>
|
|
}
|
|
`,
|
|
imports: [
|
|
FormsModule,
|
|
HotelComponent,
|
|
AsyncPipe,
|
|
CurrencyComponent,
|
|
RouterLink,
|
|
StarComponent,
|
|
NgIf,
|
|
],
|
|
providers: [HotelService],
|
|
selector: 'app-hotels',
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
})
|
|
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();
|
|
}
|
|
}
|