feat: add hotel service and integrate into app component

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

@@ -0,0 +1,42 @@
+import { Injectable } from "@angular/core";
+import { Hotel } from "../../HotelItem/hotel";
+
+@Injectable()
+export class HotelService {
+  public getHotels(): Hotel[] {
+    return [
+      {
+        "hotelId": 1,
+        "hotelName": "Buea süßes Leben",
+        "description": "Schöne Aussicht am Meer",
+        "price": 230.5,
+        "imageUrl": "assets/img/1.jpg",
+        "rating": 3.5
+      },
+      {
+        "hotelId": 2,
+        "hotelName": "Marrakesch",
+        "description": "Genießen Sie den Blick auf die Berge",
+        "price": 145.5,
+        "imageUrl": "assets/img/2.jpg",
+        "rating": 5
+      },
+      {
+        "hotelId": 3,
+        "hotelName": "Abuja neuer Palast",
+        "description": "Kompletter Aufenthalt mit Autoservice",
+        "price": 120.12,
+        "imageUrl": "assets/img/3.jpg",
+        "rating": 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
+      }
+    ];
+  }
+}

src/app/app.component.ts

@@ -3,16 +3,20 @@ import { HotelItem } from './HotelItem/HotelItem.component';
 import { SearchComponent } from './Search/search.component';
 import { UpperCasePipe } from '@angular/common';
 import { TextPipe } from '../text.pipe';
+import { HotelService } from './Parent/services/hotel.service';
+import { inject } from '@angular/core';
 
 @Component({
   selector: 'app-root',
   standalone: true,
   imports: [HotelItem, SearchComponent, UpperCasePipe, TextPipe],
   templateUrl: './app.component.html',
+  providers: [HotelService],
   styleUrl: './app.component.css'
 })
 export class AppComponent {
   public search: string = "";
+  public hotelService: HotelService = inject(HotelService);
 
   public test() {
     console.log(this.search);
@@ -27,39 +31,6 @@ export class AppComponent {
     return false;
   }
 
-  public hotels = [
+  public hotels = this.hotelService.getHotels();
-    {
-      "hotelId": 1,
-      "hotelName": "Buea süßes Leben",
-      "description": "Schöne Aussicht am Meer",
-      "price": 230.5,
-      "imageUrl": "assets/img/1.jpg",
-      "rating": 3.5
-    },
-    {
-      "hotelId": 2,
-      "hotelName": "Marrakesch",
-      "description": "Genießen Sie den Blick auf die Berge",
-      "price": 145.5,
-      "imageUrl": "assets/img/2.jpg",
-      "rating": 5
-    },
-    {
-      "hotelId": 3,
-      "hotelName": "Abuja neuer Palast",
-      "description": "Kompletter Aufenthalt mit Autoservice",
-      "price": 120.12,
-      "imageUrl": "assets/img/3.jpg",
-      "rating": 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
-    }
-  ]
 }