chore(deps): lock file maintenance

package-lock.json

@@ -16,7 +16,6 @@
         "@angular/platform-browser": "^18.2.3",
         "@angular/platform-browser-dynamic": "^18.2.3",
         "@angular/router": "^18.2.3",
-        "angular-in-memory-web-api": "^0.18.0",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0",
         "zone.js": "~0.14.3"
@@ -5158,18 +5157,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/angular-in-memory-web-api": {
-      "version": "0.18.0",
-      "license": "MIT",
-      "dependencies": {
-        "tslib": "^2.3.0"
-      },
-      "peerDependencies": {
-        "@angular/common": "^18.0.0",
-        "@angular/core": "^18.0.0",
-        "rxjs": "^6.5.3 || ^7.4.0"
-      }
-    },
     "node_modules/ansi-colors": {
       "version": "4.1.3",
       "dev": true,

package.json

@@ -18,7 +18,6 @@
     "@angular/platform-browser": "^18.2.3",
     "@angular/platform-browser-dynamic": "^18.2.3",
     "@angular/router": "^18.2.3",
-    "angular-in-memory-web-api": "^0.18.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.3"

src/app/HotelItem/HotelItem.component.ts

@@ -1,19 +1,17 @@
-import { Component, Injectable, Input } from "@angular/core";
+import { Component, Input } from "@angular/core";
 import { ChildComponent } from "../Child/child.component";
 import { Hotel } from "./hotel";
-import { CurrencyPipe, NgIf } from "@angular/common";
+import { CurrencyPipe } from "@angular/common";
 import { FormsModule } from "@angular/forms";
 import { StarRatingComponent } from "../star-rating/star-rating.component";
-import { HttpClient } from "@angular/common/http";
 
 @Component({
   selector: 'app-hotel-item',
   standalone: true,
   templateUrl: './HotelItem.component.html',
-  imports: [ChildComponent, CurrencyPipe, FormsModule, StarRatingComponent, NgIf],
+  imports: [ChildComponent, CurrencyPipe, FormsModule, StarRatingComponent],
 })
 export class HotelItem {
-
   @Input() public hotel!: Hotel;
   public selectedLanguage?: string;
 

src/app/HotelItem/hotel.ts

@@ -1,9 +1,8 @@
 export interface Hotel {
-  id: number;
+  hotelId: number;
   hotelName: string;
   description: string;
   price: number;
   imageUrl: string;
   rating: number;
-  tags: Array<string>;
 }

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

@@ -7,40 +7,36 @@ export class HotelService {
   public getHotels(): Observable<Hotel> {
     return from([
       {
-        "id": 1,
+        "hotelId": 1,
         "hotelName": "Buea süßes Leben",
         "description": "Schöne Aussicht am Meer",
         "price": 230.5,
         "imageUrl": "assets/img/1.jpg",
-        "rating": 3.5,
-        "tags": ["test"]
+        "rating": 3.5
       },
       {
-        "id": 2,
+        "hotelId": 2,
         "hotelName": "Marrakesch",
         "description": "Genießen Sie den Blick auf die Berge",
         "price": 145.5,
         "imageUrl": "assets/img/2.jpg",
-        "rating": 5,
-        "tags": ["test"]
+        "rating": 5
       },
       {
-        "id": 3,
+        "hotelId": 3,
         "hotelName": "Abuja neuer Palast",
         "description": "Kompletter Aufenthalt mit Autoservice",
         "price": 120.12,
         "imageUrl": "assets/img/3.jpg",
-        "rating": 4,
-        "tags": ["test"]
+        "rating": 4
       },
       {
-        "id": 4,
+        "hotelId": 4,
         "hotelName": "Kapstadt Stadt",
         "description": "Wunderschönes Ambiente für Ihren Aufenthalt",
         "price": 135.12,
         "imageUrl": "assets/img/4.jpg",
-        "rating": 2.5,
-        "tags": ["test"]
+        "rating": 2.5
       }
     ]);
   }

src/app/api/api.ts

@@ -1,59 +0,0 @@
-import { InMemoryDbService } from 'angular-in-memory-web-api';
-
-import { Hotel } from '../HotelItem/hotel';
-
-/**
- * Initial data for in memory web api
- *
- * @export
- * @class HotelData
- * @implements {InMemoryDbService}
- */
-export class HotelData implements InMemoryDbService {
-
-  createDb(): Record<string, Hotel[]> {
-    const hotels: Hotel[] = [
-      {
-        id: 1,
-        hotelName: 'Buea sweet life',
-        description: 'Belle vue au bord de la mer',
-        price: 230.5,
-        imageUrl: 'assets/img/1.jpg',
-        rating: 3.5,
-        tags: ['nouveau']
-      }, {
-        id: 2,
-        hotelName: 'Marakech',
-        description: 'Profitez de la vue sur les montagnes',
-        price: 145.5,
-        imageUrl: 'assets/img/2.jpg',
-        rating: 5,
-        tags: ['nouveau']
-      }, {
-        id: 3,
-        hotelName: 'Abudja new look palace',
-        description: 'Séjour complet avec service de voitures',
-        price: 120.12,
-        imageUrl: 'assets/img/3.jpg',
-        rating: 4,
-        tags: ['nouveau']
-      }, {
-        id: 4,
-        hotelName: 'Cape town city',
-        description: 'Magnifique cadre pour votre séjour',
-        price: 135.12,
-        imageUrl: 'assets/img/4.jpg',
-        rating: 2.5,
-        tags: ['nouveau']
-      }
-    ];
-
-    return { hotels };
-  }
-
-
-  genId(hotels: Hotel[]): number {
-    return hotels.length > 0 ? Math.max(...hotels.map(hotel => hotel.id)) + 1 : 1;
-  }
-}
-

src/app/app.component.html

@@ -1,11 +1,2 @@
 <h1>{{'hello' | uppercase | text}}</h1>
 <app-search [(input)]="search"></app-search>
-@if (hotels[0].hotelName) {
-<div *ngFor="let hotel of hotels">
-  <app-hotel-item *ngIf="hotel.hotelName.includes(search)" [hotel]="hotel"></app-hotel-item>
-</div>
-}
-<!-- <p>ID: {{response.id}}</p> -->
-<!-- <p>userId: {{response.userId}}</p> -->
-<!-- <p>title: {{response.title}}</p> -->
-<!-- <p>completed: {{response.completed}}</p> -->

src/app/app.component.ts

@@ -1,24 +1,21 @@
-import { Component, Injectable } from '@angular/core';
+import { Component, input } from '@angular/core';
 import { HotelItem } from './HotelItem/HotelItem.component';
 import { SearchComponent } from './Search/search.component';
-import { AsyncPipe, NgFor, NgForOf, NgIf, 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';
-import { filter, from, last, map, Observable, scan } from 'rxjs';
-import { HttpClient } from '@angular/common/http';
-import { Hotel } from './HotelItem/hotel';
+import { filter, from, last, map, Observable, range, scan, tap, toArray } from 'rxjs';
 
 interface User {
   name: string;
   age: number;
 }
 
-@Injectable({providedIn: "root"})
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [NgFor, NgForOf, NgIf, HotelItem, SearchComponent, UpperCasePipe, TextPipe, AsyncPipe],
+  imports: [HotelItem, SearchComponent, UpperCasePipe, TextPipe, AsyncPipe],
   templateUrl: './app.component.html',
   providers: [HotelService],
   styleUrl: './app.component.css'
@@ -26,16 +23,8 @@ interface User {
 export class AppComponent {
   public search: string = "";
   public hotelService: HotelService = inject(HotelService);
-  public response: any = null;
-  public hotels: Array<Hotel> = [{} as Hotel];
-
-  constructor (private http: HttpClient) {
-  }
 
   ngOnInit() {
-    this.http.get<Array<Hotel>>("api/hotels").subscribe(res => {
-      this.hotels = res;
-    });
 
     const users = [
       { name: "Max", age: 21 },
@@ -46,6 +35,7 @@ export class AppComponent {
       { name: "Jan-Marlon", age: 3 },
     ]
 
+
     const stream: Observable<User> = from(users);
 
     stream.pipe(
@@ -70,8 +60,9 @@ export class AppComponent {
     console.log(this.search);
   }
 
-  // public foundHotels = this.hotels.pipe(
-  //   filter((hotel) => hotel.hotelName.includes(this.search)),
-  // );
+  public hotels = this.hotelService.getHotels();
+  public foundHotels = this.hotels.pipe(
+    filter((hotel) => hotel.hotelName.includes(this.search)),
+  )
 }
 

src/app/app.config.ts

@@ -1,16 +1,13 @@
-import { ApplicationConfig, importProvidersFrom, provideZoneChangeDetection } from '@angular/core';
+import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
 import { provideRouter } from '@angular/router';
 import localeDe from '@angular/common/locales/de';
 import localeCn from '@angular/common/locales/zh-Hans';
 
 import { routes } from './app.routes';
 import { registerLocaleData } from '@angular/common';
-import { provideHttpClient } from '@angular/common/http';
-import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
-import { HotelData } from './api/api';
 
 registerLocaleData(localeDe, 'de-DE');
 registerLocaleData(localeCn, 'cn-CN');
 export const appConfig: ApplicationConfig = {
-  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideHttpClient(), importProvidersFrom(InMemoryWebApiModule.forRoot(HotelData))]
+  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)]
 };

src/main.ts

@@ -1,6 +1,10 @@
 import { bootstrapApplication } from '@angular/platform-browser';
 import { appConfig } from './app/app.config';
 import { AppComponent } from './app/app.component';
+import { Observable } from 'rxjs';
+
+
+
 
 bootstrapApplication(AppComponent, appConfig)
   .catch((err) => console.error(err));