angular.json

@@ -28,6 +28,7 @@
               "src/assets"
             ],
             "styles": [
+              "@angular/material/prebuilt-themes/azure-blue.css",
               "src/styles.css"
             ],
             "scripts": []
@@ -86,6 +87,7 @@
               }
             ],
             "styles": [
+              "@angular/material/prebuilt-themes/azure-blue.css",
               "src/styles.css"
             ],
             "scripts": []

package-lock.json

@@ -9,13 +9,16 @@
       "version": "0.0.0",
       "dependencies": {
         "@angular/animations": "^18.2.3",
+        "@angular/cdk": "^18.2.3",
         "@angular/common": "^18.2.3",
         "@angular/compiler": "^18.2.3",
         "@angular/core": "^18.2.3",
         "@angular/forms": "^18.2.3",
+        "@angular/material": "^18.2.3",
         "@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"
@@ -385,6 +388,23 @@
         "node": ">=10"
       }
     },
+    "node_modules/@angular/cdk": {
+      "version": "18.2.3",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-18.2.3.tgz",
+      "integrity": "sha512-lUcpYTxPZuntJ1FK7V2ugapCGMIhT6TUDjIGgXfS9AxGSSKgwr8HNs6Ze9pcjYC44UhP40sYAZuiaFwmE60A2A==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "optionalDependencies": {
+        "parse5": "^7.1.2"
+      },
+      "peerDependencies": {
+        "@angular/common": "^18.0.0 || ^19.0.0",
+        "@angular/core": "^18.0.0 || ^19.0.0",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
     "node_modules/@angular/cli": {
       "version": "18.2.3",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-18.2.3.tgz",
@@ -531,6 +551,24 @@
         "rxjs": "^6.5.3 || ^7.4.0"
       }
     },
+    "node_modules/@angular/material": {
+      "version": "18.2.3",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-18.2.3.tgz",
+      "integrity": "sha512-JFfvXaMHMhskncaxxus4sDvie9VYdMkfYgfinkLXpZlPFyn1IzjDw0c1BcrcsuD7UxQVZ/v5tucCgq1FQfGRpA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/animations": "^18.0.0 || ^19.0.0",
+        "@angular/cdk": "18.2.3",
+        "@angular/common": "^18.0.0 || ^19.0.0",
+        "@angular/core": "^18.0.0 || ^19.0.0",
+        "@angular/forms": "^18.0.0 || ^19.0.0",
+        "@angular/platform-browser": "^18.0.0 || ^19.0.0",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
     "node_modules/@angular/platform-browser": {
       "version": "18.2.3",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-18.2.3.tgz",
@@ -4763,6 +4801,20 @@
         "ajv": "^8.8.2"
       }
     },
+    "node_modules/angular-in-memory-web-api": {
+      "version": "0.18.0",
+      "resolved": "https://registry.npmjs.org/angular-in-memory-web-api/-/angular-in-memory-web-api-0.18.0.tgz",
+      "integrity": "sha512-Eqkr9+x3d7K4dmn6Qs3ZVAfqBDPZN0N7Qel5i8eU/pe5r44J/pfxlNW+1LC2Sb2PdENEdvFzC8wx8qly5+kQyQ==",
+      "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",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",
@@ -6487,7 +6539,7 @@
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
       "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
-      "dev": true,
+      "devOptional": true,
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=0.12"
@@ -10467,7 +10519,7 @@
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz",
       "integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "entities": "^4.4.0"

package.json

@@ -11,10 +11,12 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^18.2.3",
+    "@angular/cdk": "^18.2.3",
     "@angular/common": "^18.2.3",
     "@angular/compiler": "^18.2.3",
     "@angular/core": "^18.2.3",
     "@angular/forms": "^18.2.3",
+    "@angular/material": "^18.2.3",
     "@angular/platform-browser": "^18.2.3",
     "@angular/platform-browser-dynamic": "^18.2.3",
     "@angular/router": "^18.2.3",
@@ -39,4 +41,4 @@
     "tailwindcss": "^3.4.10",
     "typescript": "~5.5.2"
   }
-}
+}

src/app/Button/button.component.html

@@ -1 +0,0 @@
-<button type="button" class="px-6 py-2 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">{{ text }}</button>

src/app/Button/button.component.ts

@@ -1,11 +0,0 @@
-import { Component } from "@angular/core";
-
-
-@Component({
-  selector: 'app-button',
-  standalone: true,
-  templateUrl: './button.component.html',
-})
-export class ButtonComponent {
-  public text = 'Test';
-}

src/app/Child/child.component.html

@@ -1,4 +0,0 @@
-<h1 class="text-2xl font-bold mb-4">Child</h1>
-<p class="text-lg mb-2">Balance: {{balance}}</p>
-<p [class.hidden]="!isBroke" class="text-red-500 mb-4">I'm broke. Now I'm about as poor as Jan-Marlon.</p>
-<button type="button" (click)="takeMoney()" class="px-6 py-2 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">Take Money</button>

src/app/Child/child.component.ts

@@ -1,25 +0,0 @@
-import { Component, Input, Output, EventEmitter } from "@angular/core";
-
-@Component({
-  selector: 'app-child',
-  standalone: true,
-  templateUrl: './child.component.html',
-})
-export class ChildComponent {
-  @Input() public balance: number = 0;
-  @Output() balanceChange = new EventEmitter<number>();
-
-  public isBroke = false;
-
-  public takeMoney() {
-    if (this.balance <= 0) {
-      this.isBroke = true;
-    } else {
-      this.balance -= 50;
-      if (this.balance == 0) {
-        this.isBroke = true;
-      }
-      this.balanceChange.emit(this.balance);
-    }
-  }
-}

src/app/Parent/parent.component.html

@@ -1,9 +0,0 @@
-<div class="m-3">
- <h1>Parent</h1>
-<p>Kontostand: {{ balance }}</p>
-<button type="button" class="button" (click)=addFifty()>Add Money</button>
-
-<app-child [(balance)]="balance"></app-child>
-<app-child [(balance)]="balance"></app-child>
-</div>
-

src/app/Parent/parent.component.ts

@@ -1,17 +0,0 @@
-import { Component } from "@angular/core";
-import { ChildComponent } from "../Child/child.component";
-
-
-@Component({
-  selector: 'app-parent',
-  standalone: true,
-  templateUrl: './parent.component.html',
-  imports: [ChildComponent],
-})
-export class ParentComponent {
-  public balance = 1000;
-
-  public addFifty() {
-    this.balance += 50;
-  }
-}

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

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

src/app/Search/search.component.html

@@ -1 +1,2 @@
-<input [(ngModel)]="input" (ngModelChange)="update($event)" class="border border-gray-300 rounded-md p-2 w-full focus:border-blue-500 focus:ring focus:ring-blue-200" type="search">
+<label for="search">Search</label>
+<input [(ngModel)]="input" (ngModelChange)="update($event)" id="search" class="border border-gray-300 rounded-md p-2 w-full focus:border-blue-500 focus:ring focus:ring-blue-200" type="search">

src/app/Search/search.component.ts

@@ -1,7 +1,5 @@
-import { CommonModule } from "@angular/common";
+import { Component, Input, Output } from "@angular/core";
-import { Component, NgModule } from "@angular/core";
+import { FormsModule } from "@angular/forms";
-import { FormsModule, NgForm, NgModel } from "@angular/forms";
-import { Input, Output } from "@angular/core";
 import { EventEmitter } from "@angular/core";
 
 @Component({

src/app/api/api.ts

@@ -1,6 +1,6 @@
 import { InMemoryDbService } from 'angular-in-memory-web-api';
 
-import { Hotel } from '../HotelItem/hotel';
+import { Hotel } from '../hotel-item/hotel';
 
 /**
  * Initial data for in memory web api

src/app/app.component.html

@@ -1,5 +1 @@
-<router-outlet></router-outlet>
+<router-outlet></router-outlet>
-<!-- <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,20 +1,12 @@
 import { Component, Injectable } from '@angular/core';
-import { HotelItem } from './HotelItem/HotelItem.component';
+import { HotelService } from './service/hotel.service';
-import { SearchComponent } from './Search/search.component';
-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, scan } from 'rxjs';
-import { HttpClient } from '@angular/common/http';
-import { Hotel } from './HotelItem/hotel';
 import { RouterOutlet } from '@angular/router';
 
 @Injectable({providedIn: "root"})
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, NgFor, NgForOf, NgIf, HotelItem, SearchComponent, UpperCasePipe, TextPipe, AsyncPipe],
+  imports: [RouterOutlet],
   templateUrl: './app.component.html',
   providers: [HotelService],
   styleUrl: './app.component.css'

src/app/app.config.ts

@@ -8,6 +8,7 @@ import { registerLocaleData } from '@angular/common';
 import { provideHttpClient } from '@angular/common/http';
 import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
 import { HotelData } from './api/api';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 
 registerLocaleData(localeDe, 'de-DE');
 registerLocaleData(localeCn, 'cn-CN');
@@ -16,5 +17,5 @@ export const appConfig: ApplicationConfig = {
     provideZoneChangeDetection({ eventCoalescing: true }),
     provideRouter(routes),
     provideHttpClient(),
-    importProvidersFrom(InMemoryWebApiModule.forRoot(HotelData))]
+    importProvidersFrom(InMemoryWebApiModule.forRoot(HotelData)), provideAnimationsAsync()]
 };

src/app/app.routes.ts

@@ -1,6 +1,9 @@
 import { Routes } from '@angular/router';
 import { HotelDetailsComponent } from './hotel-details/hotel-details.component';
 import { HotelListComponent } from './hotel-list/hotel-list.component';
+import { HotelFormComponent } from './hotel-form/hotel-form.component';
+import { formGuard } from './form.guard';
+import { NotFoundComponent } from './not-found/not-found.component';
 
 export const routes: Routes = [
   {
@@ -10,5 +13,15 @@ export const routes: Routes = [
   {
     path: "hotels/:id",
     component: HotelDetailsComponent,
+    canDeactivate: [formGuard],
+  },
+  {
+    path: "create-hotel",
+    component: HotelFormComponent,
+    canDeactivate: [formGuard],
+  },
+  {
+    path: "**",
+    component: NotFoundComponent,
   },
 ];

src/app/form.guard.spec.ts

@@ -0,0 +1,17 @@
+import { TestBed } from '@angular/core/testing';
+import { CanDeactivateFn } from '@angular/router';
+
+import { formGuard } from './form.guard';
+
+describe('formGuard', () => {
+  const executeGuard: CanDeactivateFn = (...guardParameters) => 
+      TestBed.runInInjectionContext(() => formGuard(...guardParameters));
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+  });
+
+  it('should be created', () => {
+    expect(executeGuard).toBeTruthy();
+  });
+});

src/app/form.guard.ts

@@ -0,0 +1,15 @@
+import { CanDeactivateFn } from '@angular/router';
+import { HotelFormComponent } from './hotel-form/hotel-form.component';
+import { HotelDetailsComponent } from './hotel-details/hotel-details.component';
+
+export const formGuard: CanDeactivateFn<HotelFormComponent | HotelDetailsComponent> = (component: HotelFormComponent | HotelDetailsComponent, currentRoute, currentState, nextState) => {
+  const hasUnsavedChanges = 
+    (component instanceof HotelFormComponent && component.form?.dirty) ||
+    (component instanceof HotelDetailsComponent && component.hotelForm?.form?.dirty);
+
+  if (hasUnsavedChanges) {
+    return confirm('You have unsaved changes. Do you really want to leave?');
+  }
+
+  return true;
+};

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

@@ -1 +1,5 @@
-<app-hotel-item [hotel]="hotel" [isDetail]="true"></app-hotel-item>
+<div class="container p-4 mx-auto max-w-4xl">
+  <div *ngIf="hotel">
+    <app-hotel-form [hotel]="hotel" #hotelForm></app-hotel-form>
+  </div>
+</div>

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

@@ -1,22 +1,24 @@
 import { HttpClient } from '@angular/common/http';
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { Hotel } from '../HotelItem/hotel';
+import { Hotel } from '../hotel-item/hotel';
-import { CurrencyPipe } from '@angular/common';
+import { NgIf } from '@angular/common';
-import { StarRatingComponent } from '../star-rating/star-rating.component';
-import { HotelItem } from '../HotelItem/HotelItem.component';
 import { catchError, EMPTY } from 'rxjs';
+import { HotelFormComponent } from "../hotel-form/hotel-form.component";
 
 @Component({
   selector: 'app-hotel-details',
   standalone: true,
-  imports: [CurrencyPipe, StarRatingComponent, HotelItem],
+  imports: [HotelFormComponent, NgIf],
   templateUrl: './hotel-details.component.html',
   styleUrl: './hotel-details.component.css'
 })
 export class HotelDetailsComponent implements OnInit {
   public hotel: any;
 
+  @ViewChild('hotelForm', { static: false })
+  public hotelForm!: HotelFormComponent;
+
   constructor(private route: ActivatedRoute, private http: HttpClient, private router: Router) { }
 
   ngOnInit(): void {

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

@@ -0,0 +1,70 @@
+<form class="space-y-4 max-w-md mx-auto mt-4" [formGroup]="form">
+  <ng-container *ngFor="let field of ['name', 'description', 'price', 'rating']">
+    <div class="form-group">
+      <label [for]="'hotel' + field" class="block text-sm font-medium text-gray-700">
+        Hotel {{field.charAt(0).toUpperCase() + field.slice(1)}}
+      </label>
+      <input [type]="field === 'price' || field === 'rating' ? 'number' : 'text'" [formControlName]="field"
+        class="form-control mt-1 block w-full p-2 border rounded-md shadow-sm"
+        [ngClass]="{
+          'border-red-500': errorMessage.includes(field),
+          'border-gray-300': !errorMessage.includes(field),
+          'focus:border-red-500': errorMessage.includes(field),
+          'focus:border-blue-500': !errorMessage.includes(field),
+          'focus:ring-red-200': errorMessage.includes(field),
+          'focus:ring-blue-200': !errorMessage.includes(field)
+        }"
+        [id]="'hotel' + field" [placeholder]="'Enter hotel ' + field">
+      <div *ngIf="errorMessage?.includes(field)" class="text-red-500 text-sm mt-1">
+        {{errorMessage}}
+      </div>
+    </div>
+  </ng-container>
+
+  <div class="form-group">
+    <label for="hotelTags" class="block text-sm font-medium text-gray-700">Hotel Tags</label>
+    <div formArrayName="tags">
+      <div *ngFor="let tag of tags.controls; let i=index" class="flex items-center space-x-2">
+        <input type="text" [formControlName]="i"
+          class="form-control mt-1 w-full p-2 border rounded-md shadow-sm"
+          [ngClass]="{
+            'border-red-500': errorMessage.includes('tags'),
+            'border-gray-300': !errorMessage.includes('tags'),
+            'focus:border-red-500': errorMessage.includes('tags'),
+            'focus:border-blue-500': !errorMessage.includes('tags'),
+            'focus:ring-red-200': errorMessage.includes('tags'),
+            'focus:ring-blue-200': !errorMessage.includes('tags')
+          }"
+          [id]="'hotelTag' + i" placeholder="Enter hotel tag">
+        <button mat-icon-button (click)="tags.removeAt(i)" class="mt-1">
+          <mat-icon class="text-red-500">delete</mat-icon>
+        </button>
+      </div>
+      <button type="button" mat-button (click)="addTag()" class="mt-2">Add Tag</button>
+    </div>
+    <div *ngIf="errorMessage.includes('tags')" class="text-red-500 text-sm mt-1">
+      {{errorMessage}}
+    </div>
+  </div>
+
+  <div class="flex justify-between">
+    <div class="flex space-x-1">
+      <button type="submit" mat-flat-button (click)="submit()">Submit</button>
+      <button type="button" mat-stroked-button routerLink="/">Cancel</button>
+    </div>
+    <button mat-stroked-button color="warn" aria-label="Delete hotel" *ngIf="hotel" (click)="showDeleteConfirmation = true">
+      Remove
+    </button>
+
+    <div *ngIf="showDeleteConfirmation" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div class="bg-white p-6 rounded-lg shadow-lg max-w-sm w-full">
+        <h2 class="text-xl font-bold mb-4">Confirm Deletion</h2>
+        <p class="mb-6">Are you sure you want to delete this hotel?</p>
+        <div class="flex justify-end space-x-2">
+          <button mat-stroked-button (click)="showDeleteConfirmation = false">Cancel</button>
+          <button mat-flat-button color="warn" (click)="delete()">Delete</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>

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

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

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

@@ -0,0 +1,150 @@
+import { Component, inject, Input } from '@angular/core';
+import { AbstractControl, FormArray, FormControl, FormGroup, ReactiveFormsModule, Validators } from "@angular/forms";
+import { Hotel } from "../hotel-item/hotel";
+import { HttpClient } from '@angular/common/http';
+import { catchError, debounceTime } from "rxjs";
+import { Router, RouterLink } from "@angular/router";
+import { NgClass, NgFor, NgIf } from "@angular/common";
+import { MatButtonModule } from "@angular/material/button";
+import { MatIconModule } from "@angular/material/icon";
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'app-hotel-form',
+  standalone: true,
+  imports: [
+    ReactiveFormsModule,
+    RouterLink,
+    NgIf,
+    MatButtonModule,
+    MatIconModule,
+    NgFor,
+    FormsModule,
+    NgClass
+  ],
+  templateUrl: './hotel-form.component.html',
+  styleUrl: './hotel-form.component.css'
+})
+export class HotelFormComponent {
+  public form!: FormGroup;
+
+  @Input()
+  public hotel!: Hotel;
+
+  public router: Router = inject(Router);
+
+  public showDeleteConfirmation = false;
+
+  constructor(private http: HttpClient) { }
+
+  public errorMessage: string = '';
+
+  ngOnInit() {
+    this.form = new FormGroup({
+      name: new FormControl(this.hotel?.hotelName || '', [Validators.minLength(3), Validators.required]),
+      description: new FormControl(this.hotel?.description || '', [Validators.minLength(3), Validators.required]),
+      price: new FormControl(this.hotel?.price || '', [Validators.min(0), Validators.required]),
+      rating: new FormControl(this.hotel?.rating || '', [Validators.min(0), Validators.max(5), Validators.required]),
+      tags: new FormArray(this.hotel?.tags?.map(tag => new FormControl(tag)) || [])
+    });
+
+    Object.keys(this.form.controls).forEach(key => {
+      const control = this.form.get(key);
+      control?.valueChanges.pipe(
+        debounceTime(1000)
+      ).subscribe(() => { 
+        this.setError(control as AbstractControl, key);
+      });
+    });
+  }
+
+  public delete() {
+    this.http.delete(`api/hotels/${this.hotel?.id}`).pipe(
+      catchError(err => {
+        console.error('Error deleting hotel', err);
+        return err;
+      })
+    ).subscribe(() => {
+      console.log('Hotel deleted');
+    });
+
+    this.router.navigate(['/']);
+  }
+
+  get tags() {
+    return this.form.get('tags') as FormArray;
+  }
+
+  public addTag() {
+    this.tags.push(new FormControl(''));
+  }
+
+  public submit() {
+    if (this.form.valid && !this.errorMessage) {
+      const hotelData: Hotel = {
+        id: this.hotel?.id || 0,
+        hotelName: this.form.value.name,
+        description: this.form.value.description,
+        price: this.form.value.price,
+        rating: this.form.value.rating,
+        imageUrl: this.hotel?.imageUrl || 'https://placehold.co/2000x1050/EEE/31343C',
+        tags: this.form.value.tags || []
+      };
+
+      if (this.hotel) {
+        this.http.put(`api/hotels/${this.hotel.id}`, hotelData).pipe(
+          catchError(err => {
+            console.error('Error updating hotel', err);
+            return err;
+          })
+        ).subscribe(() => {
+          console.log('Hotel updated');
+        });
+      }
+
+      else {
+        this.http.post('api/hotels', hotelData).pipe(
+          catchError(err => {
+            console.error('Error creating hotel', err);
+            return err;
+          })
+        ).subscribe(() => {
+          console.log('Hotel created');
+        });
+      }
+
+      this.form.reset();
+      this.router.navigate(['/']);
+    }
+  }
+
+  private validationErrors: Record<string, string> = {
+    'required': 'This field is required',
+    'minlength': 'This field must be at least 3 characters long',
+    'min': 'This field must be at least 0',
+    'max': 'This field must be at most 5',
+    'name.required': 'Hotel name is required',
+    'name.minlength': 'Hotel name must be at least 3 characters long',
+    'description.required': 'Hotel description is required', 
+    'description.minlength': 'Hotel description must be at least 3 characters long',
+    'price.required': 'Hotel price is required',
+    'price.min': 'Hotel price cannot be negative',
+    'rating.required': 'Hotel rating is required',
+    'rating.min': 'Hotel rating must be at least 0',
+    'rating.max': 'Hotel rating cannot be more than 5',
+    'tags.required': 'At least one tag is required',
+  };
+
+  private setError(control: AbstractControl, controlName: string) {
+    if ((control.touched || control.dirty) && control.errors) {
+      const errors = Object.keys(control.errors).map(key => {
+        const errorKey = `${controlName}.${key}`;
+        return this.validationErrors[errorKey] || this.validationErrors[key];
+      });
+      this.errorMessage = errors.join(' ');
+    } else {
+      this.errorMessage = '';
+    }
+  }
+}
+

src/app/hotel-item/HotelItem.component.ts

@@ -1,17 +1,14 @@
-import { Component, Injectable, Input } from "@angular/core";
+import { Component, Input } from "@angular/core";
-import { ChildComponent } from "../Child/child.component";
 import { Hotel } from "./hotel";
-import { CurrencyPipe, NgIf } from "@angular/common";
+import {CurrencyPipe, NgForOf, NgIf} from "@angular/common";
 import { FormsModule } from "@angular/forms";
-import { StarRatingComponent } from "../star-rating/star-rating.component";
-import { HttpClient } from "@angular/common/http";
 import { RouterLink } from "@angular/router";
 
 @Component({
   selector: 'app-hotel-item',
   standalone: true,
   templateUrl: './HotelItem.component.html',
-  imports: [ChildComponent, CurrencyPipe, FormsModule, StarRatingComponent, NgIf, RouterLink],
+  imports: [CurrencyPipe, FormsModule, NgIf, RouterLink, NgForOf],
 })
 export class HotelItem {
 

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

@@ -1,9 +1,28 @@
 <div class="container p-4 mx-auto max-w-4xl">
-  <h1>{{'hello' | uppercase | text}}</h1>
+  <div class="fixed top-0 left-0 w-full bg-white/80 backdrop-blur-xl z-50">
-  <app-search [(input)]="search"></app-search>
+    <div class="justify-center max-w-4xl container p-4 mx-auto">
-  @if (hotels[0].hotelName) {
+      <h1 class="">{{'hello' | uppercase | text}}</h1>
+      <app-search [(input)]="search"></app-search>
+      <button routerLink="/create-hotel" mat-flat-button
+        class="btn btn-primary bg-blue-500 text-white font-semibold py-2 px-4 rounded-md shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75 my-4">Create
+        New Hotel</button>
+    </div>
+  </div>
+  <div *ngIf="hotels[0].hotelName" class="mt-64">
     <div *ngFor="let hotel of hotels">
       <app-hotel-item *ngIf="hotel.hotelName.toLowerCase().includes(search.toLowerCase())" [hotel]="hotel"></app-hotel-item>
     </div>
-  }
+  </div>
+
+  <div *ngIf="!hotels[0].hotelName" class="mt-64">
+    <div class="animate-pulse space-y-4">
+      <div class="h-8 bg-gray-200 rounded w-52"></div>
+      <div class="space-y-3">
+        <div class="h-4 bg-gray-200 rounded w-3/4"></div>
+        <div class="h-4 bg-gray-200 rounded w-11/12"></div>
+        <div class="h-4 bg-gray-200 rounded w-2/3"></div>
+      </div>
+      <div class="h-[300px] bg-gray-200 rounded w-full"></div>
+    </div>
+  </div>
 </div>

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

@@ -1,22 +1,18 @@
-import { CommonModule, NgFor, NgIf, UpperCasePipe } from '@angular/common';
+import { NgFor, NgIf, UpperCasePipe } from '@angular/common';
 import { Component, inject } from '@angular/core';
 import { TextPipe } from '../../text.pipe';
-import { SearchComponent } from '../Search/search.component';
+import { SearchComponent } from '../search/search.component';
-import { HotelService } from '../Parent/services/hotel.service';
+import { HotelService } from '../service/hotel.service';
-import { Hotel } from '../HotelItem/hotel';
+import { Hotel } from '../hotel-item/hotel';
 import { HttpClient } from '@angular/common/http';
-import { filter, from, last, map, Observable, scan } from 'rxjs';
+import { HotelItem } from '../hotel-item/HotelItem.component';
-import { HotelItem } from '../HotelItem/HotelItem.component';
+import { RouterLink } from '@angular/router';
-
+import { MatButtonModule } from '@angular/material/button';
-interface User {
-  name: string;
-  age: number;
-}
 
 @Component({
   selector: 'app-hotel-list',
   standalone: true,
-  imports: [UpperCasePipe, TextPipe, SearchComponent, HotelItem, NgFor, NgIf],
+  imports: [UpperCasePipe, TextPipe, SearchComponent, HotelItem, NgFor, NgIf, RouterLink, MatButtonModule],
   templateUrl: './hotel-list.component.html',
   styleUrl: './hotel-list.component.css'
 })
@@ -33,41 +29,5 @@ export class HotelListComponent {
     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)),
-  // );
 }

src/app/not-found/not-found.component.html

@@ -0,0 +1,7 @@
+<div class="min-h-screen flex items-center justify-center bg-gray-100">
+  <div class="text-center">
+    <h1 class="text-9xl font-bold text-gray-800">404</h1>
+    <p class="text-2xl font-medium text-gray-600 mb-8">Page Not Found</p>
+    <a type="submit" mat-flat-button routerLink="/">Return Home</a>
+  </div>
+</div>

src/app/not-found/not-found.component.spec.ts

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

src/app/not-found/not-found.component.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { RouterLink } from '@angular/router';
+
+@Component({
+  selector: 'app-not-found',
+  standalone: true,
+  imports: [
+    MatButtonModule,
+    RouterLink
+  ],
+  templateUrl: './not-found.component.html',
+  styleUrl: './not-found.component.css'
+})
+export class NotFoundComponent {
+
+}

src/app/service/hotel.service.ts

@@ -0,0 +1,51 @@
+import { Injectable } from "@angular/core";
+import { Hotel } from "../hotel-item/hotel";
+import { HttpClient, HttpErrorResponse } from "@angular/common/http";
+import { Observable, throwError, catchError } from "rxjs";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class HotelService {
+  private apiUrl = 'api/hotels';
+
+  constructor(private http: HttpClient) {}
+
+  private handleError(error: HttpErrorResponse) {
+    let errorMessage = 'An error occurred';
+    if (error.error instanceof ErrorEvent) {
+      // Client-side error
+      errorMessage = `Error: ${error.error.message}`;
+    } else {
+      // Server-side error
+      errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;
+    }
+    console.error(errorMessage);
+    return throwError(() => errorMessage);
+  }
+
+  public getHotels(): Observable<Hotel[]> {
+    return this.http.get<Hotel[]>(this.apiUrl)
+      .pipe(catchError(this.handleError));
+  }
+
+  public getHotel(id: number): Observable<Hotel> {
+    return this.http.get<Hotel>(`${this.apiUrl}/${id}`)
+      .pipe(catchError(this.handleError));
+  }
+
+  public createHotel(hotel: Hotel): Observable<Hotel> {
+    return this.http.post<Hotel>(this.apiUrl, hotel)
+      .pipe(catchError(this.handleError));
+  }
+
+  public updateHotel(hotel: Hotel): Observable<Hotel> {
+    return this.http.put<Hotel>(`${this.apiUrl}/${hotel.id}`, hotel)
+      .pipe(catchError(this.handleError));
+  }
+
+  public deleteHotel(id: number): Observable<{}> {
+    return this.http.delete(`${this.apiUrl}/${id}`)
+      .pipe(catchError(this.handleError));
+  }
+}

src/index.html

@@ -7,8 +7,10 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link rel="stylesheet" href="./styles.css">
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
-<body>
+<body class="mat-typography">
   <app-root></app-root>
 </body>
 </html>

src/styles.css

@@ -6,3 +6,6 @@
 .button {
   @apply border-black rounded px-3 py-1 border-[3px];
 }
+
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

tailwind.config.js

@@ -1,18 +1,9 @@
 /** @type {import('tailwindcss').Config} */
 
-const colors = require('tailwindcss/colors');
-
 module.exports = {
   content: [
     "./src/**/*.{html,ts}",
   ],
-  theme: {
-    extend: {
-      colors: {
-        ...colors,
-      }
-    },
-  },
   plugins: [],
 }