ka

src/app/hotel/hotel.component.ts

@@ -3,6 +3,7 @@ import {Hotel} from "./hotel"
 import {CurrencyPipe} from "@angular/common";
 import {Lang} from "../idek/lang";
 import {StarComponent} from "../star/star.component";
+import {HotelService} from "../service/hotel.service";
 
 
 @Component({
@@ -27,4 +28,7 @@ export class HotelComponent {
   public currency: Lang = {name: 'de', code: 'de-DE', currency: 'EUR'}
   @Input()
   public hotel!: Hotel;
+
+  constructor() {
+  }
 }

src/app/hotel/hotels.component.ts

@@ -1,8 +1,9 @@
-import {Component} from "@angular/core";
+import {Component, inject} from "@angular/core";
 import {HotelComponent} from "./hotel.component";
 import {Hotel} from "./hotel";
 import {FormsModule} from "@angular/forms";
 import {Lang} from "../idek/lang";
+import {HotelService} from "../service/hotel.service";
 
 @Component({
   standalone: true,
@@ -23,6 +24,7 @@ import {Lang} from "../idek/lang";
     }
   `,
   imports: [FormsModule, HotelComponent],
+  providers: [HotelService],
   selector: 'app-hotels'
 })
 export class HotelsComponent {
@@ -55,8 +57,10 @@ export class HotelsComponent {
 
   public matchingHotels: Hotel[] = [];
 
+  private hotelService: HotelService = inject(HotelService);
+
   constructor() {
-    this.matchingHotels = this.hotels;
+    this.matchingHotels = this.hotelService.getHotels;
   }
 
   public setCurrency(currencyInput: string): void {
@@ -71,45 +75,10 @@ export class HotelsComponent {
   public searchEvent(input: string) {
     this.search = input.toLowerCase();
     this.matchingHotels = []
-    this.hotels.forEach((hotel: Hotel) => {
+    this.hotelService.getHotels .forEach((hotel: Hotel) => {
       if (hotel.hotelName.toLowerCase().includes(this.search)) {
           this.matchingHotels.push(hotel);
       }
     })
   }
-
-  public hotels: Hotel[] = [
-    {
-      "hotelId": 1,
-      "hotelName": "Buea süßes Leben",
-      "description": "Schöne Aussicht am Meer",
-      "price": 230.5,
-      "imageUrl": "assets/img/heisenberg.jpg",
-      "rating": 3.5
-    },
-    {
-      "hotelId": 2,
-      "hotelName": "Marrakesch",
-      "description": "Genießen Sie den Blick auf die Berge",
-      "price": 145.5,
-      "imageUrl": "assets/img/kjan.png",
-      "rating": 5
-    },
-    {
-      "hotelId": 3,
-      "hotelName": "Abuja neuer Palast",
-      "description": "Kompletter Aufenthalt mit Autoservice",
-      "price": 120.12,
-      "imageUrl": "assets/img/huy.png",
-      "rating": 4
-    },
-    {
-      "hotelId": 4,
-      "hotelName": "OUR Hotel",
-      "description": "Wunderschönes Ambiente für Ihren Aufenthalt",
-      "price": 135.12,
-      "imageUrl": "assets/img/rat.png",
-      "rating": 2.5
-    }
-  ]
 }

src/app/service/hotel.service.ts

@@ -0,0 +1,44 @@
+import {Injectable} from "@angular/core";
+import {Hotel} from "../hotel/hotel";
+
+@Injectable()
+export class HotelService {
+  private hotels: Hotel[] = [
+    {
+      "hotelId": 1,
+      "hotelName": "Buea süßes Leben",
+      "description": "Schöne Aussicht am Meer",
+      "price": 230.5,
+      "imageUrl": "assets/img/heisenberg.jpg",
+      "rating": 3.5
+    },
+    {
+      "hotelId": 2,
+      "hotelName": "Marrakesch",
+      "description": "Genießen Sie den Blick auf die Berge",
+      "price": 145.5,
+      "imageUrl": "assets/img/kjan.png",
+      "rating": 5
+    },
+    {
+      "hotelId": 3,
+      "hotelName": "Abuja neuer Palast",
+      "description": "Kompletter Aufenthalt mit Autoservice",
+      "price": 120.12,
+      "imageUrl": "assets/img/huy.png",
+      "rating": 4
+    },
+    {
+      "hotelId": 4,
+      "hotelName": "OUR Hotel",
+      "description": "Wunderschönes Ambiente für Ihren Aufenthalt",
+      "price": 135.12,
+      "imageUrl": "assets/img/rat.png",
+      "rating": 2.5
+    }
+  ];
+
+  public get getHotels() {
+    return this.hotels;
+  }
+}