feat: add hotel item component and search functionality

angular.json

@@ -24,7 +24,8 @@
               {
                 "glob": "**/*",
                 "input": "public"
-              }
+              },
+              "src/assets"
             ],
             "styles": [
               "src/styles.css"

src/app/HotelItem/HotelItem.component.html

@@ -0,0 +1,5 @@
+<p>Name: {{hotel.hotelName}}</p>
+<p>Description: {{hotel.description}}</p>
+<p>Price: {{hotel.price}}$</p>
+<img src="{{hotel.imageUrl}}" alt="Hotel">
+<p class="border-b border-black">{{hotel.rating}}</p>

src/app/HotelItem/HotelItem.component.ts

@@ -0,0 +1,14 @@
+import { Component } from "@angular/core";
+import { ChildComponent } from "../Child/child.component";
+import { Input } from "@angular/core";
+import { Hotel } from "./hotel";
+
+@Component({
+  selector: 'app-hotel-item',
+  standalone: true,
+  templateUrl: './HotelItem.component.html',
+  imports: [ChildComponent],
+})
+export class HotelItem {
+  @Input() public hotel!: Hotel;
+}

src/app/HotelItem/hotel.ts

@@ -0,0 +1,8 @@
+export interface Hotel {
+  hotelId: number;
+  hotelName: String;
+  description: String;
+  price: number;
+  imageUrl: String;
+  rating: number;
+}

src/app/Search/search.component.html

@@ -0,0 +1 @@
+<input [(ngModel)]="input" (ngModelChange)="update($event)" class="border border-black" type="search">

src/app/Search/search.component.ts

@@ -0,0 +1,20 @@
+import { CommonModule } from "@angular/common";
+import { Component, NgModule } from "@angular/core";
+import { FormsModule, NgForm, NgModel } from "@angular/forms";
+import { Input, Output } from "@angular/core";
+import { EventEmitter } from "@angular/core";
+
+@Component({
+  selector: 'app-search',
+  standalone: true,
+  templateUrl: './search.component.html',
+  imports: [FormsModule],
+})
+export class SearchComponent {
+  @Input() public input: string = "";
+  @Output() inputChange = new EventEmitter<string>();
+
+  public update(e: string) {
+    this.inputChange.emit(e);
+  }
+}

src/app/app.component.html

@@ -1 +1,4 @@
-<app-parent></app-parent>
+<app-search [(input)]="search"></app-search>
+<div *ngFor="let hotel of hotels">
+  <app-hotel-item *ngIf="hotel.hotelName.includes(search)" [hotel]="hotel"></app-hotel-item>
+</div>

src/app/app.component.ts

@@ -1,19 +1,55 @@
-import { Component } from '@angular/core';
+import { Component, input } from '@angular/core';
-import { ParentComponent } from './Parent/parent.component';
+import { HotelItem } from './HotelItem/HotelItem.component';
-import { ChildComponent } from './Child/child.component';
+import { CommonModule } from '@angular/common';
+import { SearchComponent } from './Search/search.component';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [ParentComponent, ChildComponent],
+  imports: [HotelItem, CommonModule, SearchComponent],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css'
 })
 export class AppComponent {
-  public test = "Hello";
+  public search: string = "";
 
-  public get age() {
+  public test() {
-    return 17;
+    console.log(this.search);
   }
+
+  public hotels = [
+    {
+      "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
+    }
+  ]
 }