chore(deps): lock file maintenance

package-lock.json

@@ -16,6 +16,7 @@
         "@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"
@@ -5157,6 +5158,18 @@
       "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,6 +18,7 @@
     "@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,17 +1,19 @@
-import { Component, Input } from "@angular/core";
+import { Component, Injectable, Input } from "@angular/core";
 import { ChildComponent } from "../Child/child.component";
 import { Hotel } from "./hotel";
-import { CurrencyPipe } from "@angular/common";
+import { CurrencyPipe, NgIf } 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],
+  imports: [ChildComponent, CurrencyPipe, FormsModule, StarRatingComponent, NgIf],
 })
 export class HotelItem {
+
   @Input() public hotel!: Hotel;
   public selectedLanguage?: string;
 

src/app/HotelItem/hotel.ts

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

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

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

src/app/api/api.ts

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

src/app/app.config.ts

@@ -1,13 +1,16 @@
-import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import { ApplicationConfig, importProvidersFrom, 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)]
+  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideHttpClient(), importProvidersFrom(InMemoryWebApiModule.forRoot(HotelData))]
 };

src/main.ts

@@ -1,10 +1,6 @@
 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));