Compare commits
1 Commits
07bedcd71d
...
4963544e91
Author | SHA1 | Date | |
---|---|---|---|
4963544e91 |
8308
package-lock.json
generated
8308
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,11 +1,10 @@
|
|||||||
import { Injectable } from "@angular/core";
|
import { Injectable } from "@angular/core";
|
||||||
import { Hotel } from "../../HotelItem/hotel";
|
import { Hotel } from "../../HotelItem/hotel";
|
||||||
import { from, Observable } from "rxjs";
|
|
||||||
|
|
||||||
@Injectable()
|
@Injectable()
|
||||||
export class HotelService {
|
export class HotelService {
|
||||||
public getHotels(): Observable<Hotel> {
|
public getHotels(): Hotel[] {
|
||||||
return from([
|
return [
|
||||||
{
|
{
|
||||||
"hotelId": 1,
|
"hotelId": 1,
|
||||||
"hotelName": "Buea süßes Leben",
|
"hotelName": "Buea süßes Leben",
|
||||||
@ -38,6 +37,6 @@ export class HotelService {
|
|||||||
"imageUrl": "assets/img/4.jpg",
|
"imageUrl": "assets/img/4.jpg",
|
||||||
"rating": 2.5
|
"rating": 2.5
|
||||||
}
|
}
|
||||||
]);
|
];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,7 +1,11 @@
|
|||||||
<h1>{{'hello' | uppercase | text}}</h1>
|
<h1>{{'hello' | uppercase | text}}</h1>
|
||||||
<app-search [(input)]="search"></app-search>
|
<app-search [(input)]="search"></app-search>
|
||||||
@for (let hotel of foundHotels | async) {
|
@for (hotel of hotels; track hotel.hotelId) {
|
||||||
@if (search === "") {
|
@let should_show = search === "" || hotel.hotelName.includes(search);
|
||||||
|
@if (should_show) {
|
||||||
<app-hotel-item [hotel]="hotel"></app-hotel-item>
|
<app-hotel-item [hotel]="hotel"></app-hotel-item>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@if (!has_hotels()) {
|
||||||
|
<p>No hotels found</p>
|
||||||
|
}
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
import { Component, input } from '@angular/core';
|
import { Component, input } from '@angular/core';
|
||||||
import { HotelItem } from './HotelItem/HotelItem.component';
|
import { HotelItem } from './HotelItem/HotelItem.component';
|
||||||
import { SearchComponent } from './Search/search.component';
|
import { SearchComponent } from './Search/search.component';
|
||||||
import { AsyncPipe, UpperCasePipe } from '@angular/common';
|
import { UpperCasePipe } from '@angular/common';
|
||||||
import { TextPipe } from '../text.pipe';
|
import { TextPipe } from '../text.pipe';
|
||||||
import { HotelService } from './Parent/services/hotel.service';
|
import { HotelService } from './Parent/services/hotel.service';
|
||||||
import { inject } from '@angular/core';
|
import { inject } from '@angular/core';
|
||||||
@ -10,7 +10,7 @@ import { filter, map, Observable, range } from 'rxjs';
|
|||||||
@Component({
|
@Component({
|
||||||
selector: 'app-root',
|
selector: 'app-root',
|
||||||
standalone: true,
|
standalone: true,
|
||||||
imports: [HotelItem, SearchComponent, UpperCasePipe, TextPipe, AsyncPipe],
|
imports: [HotelItem, SearchComponent, UpperCasePipe, TextPipe],
|
||||||
templateUrl: './app.component.html',
|
templateUrl: './app.component.html',
|
||||||
providers: [HotelService],
|
providers: [HotelService],
|
||||||
styleUrl: './app.component.css'
|
styleUrl: './app.component.css'
|
||||||
@ -37,9 +37,15 @@ export class AppComponent {
|
|||||||
console.log(this.search);
|
console.log(this.search);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public has_hotels(): boolean {
|
||||||
|
for (let hotel of this.hotels) {
|
||||||
|
if (hotel.hotelName.includes(this.search)) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
public hotels = this.hotelService.getHotels();
|
public hotels = this.hotelService.getHotels();
|
||||||
public foundHotels = this.hotels.pipe(
|
|
||||||
filter((hotel) => hotel.hotelName.includes(this.search)),
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user