idk

src/app/hotel/hotel.component.ts

@@ -1,21 +1,30 @@
 import {Component, Input} from "@angular/core";
 import {Hotel} from "./hotel"
+import {CurrencyPipe} from "@angular/common";
+import {Lang} from "../idek/lang";
+import {StarComponent} from "../star/star.component";
 
 
 @Component({
   standalone: true,
   selector: 'app-hotel',
+  imports: [
+    CurrencyPipe,
+    StarComponent
+  ],
   template: `
     <div style="border: white 2px; border-radius: 2px">
-      <p class="name">Name: {{hotel.hotelName}}</p>
-      <p>Beschreibung: {{hotel.description}}</p>
-      <p>Preis: {{hotel.price}}/nacht</p>
-      <p>Sterne: {{hotel.rating}}/5</p>
+      <p class="name">Name: {{ hotel.hotelName }}</p>
+      <p>Beschreibung: {{ hotel.description }}</p>
+      <p>Preis: {{ hotel.price | currency: currency.currency : 'symbol' : '2.2-2' : currency.code }}/nacht</p>
+      <p>Sterne: <app-star [rating]="hotel.rating"></app-star></p>
       <img width="64" height="64" src="{{hotel.imageUrl}}">
     </div>
   `
 })
 export class HotelComponent {
+  @Input()
+  public currency: Lang = {name: 'de', code: 'de-DE', currency: 'EUR'}
   @Input()
   public hotel!: Hotel;
 }

src/app/hotel/hotels.component.ts

@@ -2,15 +2,21 @@ import {Component} from "@angular/core";
 import {HotelComponent} from "./hotel.component";
 import {Hotel} from "./hotel";
 import {FormsModule} from "@angular/forms";
+import {Lang} from "../idek/lang";
 
 @Component({
   standalone: true,
   template: `
+    <select [ngModel]="currency" (ngModelChange)="setCurrency($event)">
+      @for (currency of currencies; track null) {
+        <option value="{{currency.name}}">{{currency.name}}</option>
+      }
+    </select>
     <form>
       <input name="search" [ngModel]="search" (ngModelChange)="searchEvent($event)">
     </form>
     @for (hotel of matchingHotels; track hotel.hotelId) {
-        <app-hotel [hotel]="hotel"></app-hotel>
+        <app-hotel [hotel]="hotel" [currency]="currency"></app-hotel>
         <hr>
     } @empty {
       <h1>no matching results for {{search}}</h1>
@@ -22,12 +28,46 @@ import {FormsModule} from "@angular/forms";
 export class HotelsComponent {
   public search: string = '';
 
+  public currency: Lang = {name: 'de', code: 'de-DE', currency: 'EUR'};
+
+  public currencies: Lang[] = [
+    {
+      name: 'de',
+      code: 'de-DE',
+      currency: 'EUR'
+    },
+    {
+      name: 'en',
+      code: 'en-US',
+      currency: 'USD'
+    },
+    {
+      name: 'jap',
+      code: 'ja-JP',
+      currency: 'JPY'
+    },
+    {
+      name: 'cn',
+      code: 'cn-CN',
+      currency: 'CNY'
+    }
+  ]
+
   public matchingHotels: Hotel[] = [];
 
   constructor() {
     this.matchingHotels = this.hotels;
   }
 
+  public setCurrency(currencyInput: string): void {
+    for (const currency of this.currencies) {
+      if (currency.name === currencyInput) {
+        this.currency = currency;
+        break;
+      }
+    }
+  }
+
   public searchEvent(input: string) {
     this.search = input.toLowerCase();
     this.matchingHotels = []