feat: add hotel details and list components with routing

src/app/hotel-list/hotel-list.component.html

@@ -0,0 +1,7 @@
+<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>
+}

src/app/hotel-list/hotel-list.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HotelListComponent } from './hotel-list.component';
+
+describe('HotelListComponent', () => {
+  let component: HotelListComponent;
+  let fixture: ComponentFixture<HotelListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [HotelListComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(HotelListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/hotel-list/hotel-list.component.ts

@@ -0,0 +1,73 @@
+import { CommonModule, NgFor, NgIf, UpperCasePipe } from '@angular/common';
+import { Component, inject } from '@angular/core';
+import { TextPipe } from '../../text.pipe';
+import { SearchComponent } from '../Search/search.component';
+import { HotelService } from '../Parent/services/hotel.service';
+import { Hotel } from '../HotelItem/hotel';
+import { HttpClient } from '@angular/common/http';
+import { filter, from, last, map, Observable, scan } from 'rxjs';
+import { HotelItem } from '../HotelItem/HotelItem.component';
+
+interface User {
+  name: string;
+  age: number;
+}
+
+@Component({
+  selector: 'app-hotel-list',
+  standalone: true,
+  imports: [UpperCasePipe, TextPipe, SearchComponent, HotelItem, NgFor, NgIf],
+  templateUrl: './hotel-list.component.html',
+  styleUrl: './hotel-list.component.css'
+})
+export class HotelListComponent {
+  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 },
+      { name: "Peter", age: 31 },
+      { name: "Hans", age: 13 },
+      { name: "Klaus", age: 51 },
+      { name: "Dieter", age: 1 },
+      { name: "Jan-Marlon", age: 3 },
+    ]
+
+    const stream: Observable<User> = from(users);
+
+    stream.pipe(
+      filter((user) => user.age > 18),
+      scan((acc, user) => acc + user.age, 0),
+      map((ageSum, index) => ageSum / (index + 1)),
+      last(),
+    ).subscribe(console.log);
+
+    // const stream: Observable<number | string> = from([5, 1, 2, 12, 5, 14, 17, 5, "testing"]);
+
+    // stream.pipe(
+    //  filter((value) => typeof value === "number"),
+    //  tap((value) => console.log("Zahl:" + value)),
+    //  filter((value: number) => value % 2 === 0),
+    //  tap((value) => console.log("Gerade Zahl: " + value)),
+    //  toArray(),
+    //).subscribe(console.log);
+  }
+
+  public test() {
+    console.log(this.search);
+  }
+
+  // public foundHotels = this.hotels.pipe(
+  //   filter((hotel) => hotel.hotelName.includes(this.search)),
+  // );
+}