feat: update hotel service to use observables

src/app/Parent/services/hotel.service.ts

@@ -1,10 +1,11 @@
 import { Injectable } from "@angular/core";
 import { Hotel } from "../../HotelItem/hotel";
+import { from, Observable } from "rxjs";
 
 @Injectable()
 export class HotelService {
-  public getHotels(): Hotel[] {
+  public getHotels(): Observable<Hotel> {
-    return [
+    return from([
       {
         "hotelId": 1,
         "hotelName": "Buea süßes Leben",
@@ -37,6 +38,6 @@ export class HotelService {
         "imageUrl": "assets/img/4.jpg",
         "rating": 2.5
       }
-    ];
+    ]);
   }
 }

src/app/app.component.html

@@ -1,11 +1,7 @@
 <h1>{{'hello' | uppercase | text}}</h1>
 <app-search [(input)]="search"></app-search>
-@for (hotel of hotels; track hotel.hotelId) {
+@for (let hotel of foundHotels | async) {
-  @let should_show = search === "" || hotel.hotelName.includes(search);
+  @if (search === "") {
-  @if (should_show) {
     <app-hotel-item [hotel]="hotel"></app-hotel-item>
   }
 }
-@if (!has_hotels()) {
-  <p>No hotels found</p>
-}

src/app/app.component.ts

@@ -1,7 +1,7 @@
 import { Component, input } from '@angular/core';
 import { HotelItem } from './HotelItem/HotelItem.component';
 import { SearchComponent } from './Search/search.component';
-import { UpperCasePipe } from '@angular/common';
+import { AsyncPipe, UpperCasePipe } from '@angular/common';
 import { TextPipe } from '../text.pipe';
 import { HotelService } from './Parent/services/hotel.service';
 import { inject } from '@angular/core';
@@ -10,7 +10,7 @@ import { filter, map, Observable, range } from 'rxjs';
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [HotelItem, SearchComponent, UpperCasePipe, TextPipe],
+  imports: [HotelItem, SearchComponent, UpperCasePipe, TextPipe, AsyncPipe],
   templateUrl: './app.component.html',
   providers: [HotelService],
   styleUrl: './app.component.css'
@@ -37,15 +37,9 @@ export class AppComponent {
     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 foundHotels = this.hotels.pipe(
+    filter((hotel) => hotel.hotelName.includes(this.search)),
+  )
 }