feat: add language selection and currency formatting options

src/app/HotelItem/HotelItem.component.html

@@ -1,5 +1,10 @@
 <p>Name: {{hotel.hotelName}}</p>
 <p>Description: {{hotel.description}}</p>
-<p>Price: {{hotel.price}}$</p>
+<p>Price: {{hotel.price | currency : "EUR" : "symbol" : "2.2-2" : "de-DE"}}</p>
+<select [ngModel]="selectedLanguage" (ngModelChange)="languageChange($event)">
+  @for (lang of langs; track lang.lang) {
+    <option value="{{lang.lang}}">{{lang.lang}}</option>
+  }
+</select>
 <img src="{{hotel.imageUrl}}" alt="Hotel">
 <p class="border-b border-black">{{hotel.rating}}</p>

src/app/HotelItem/HotelItem.component.ts

@@ -2,13 +2,36 @@ import { Component } from "@angular/core";
 import { ChildComponent } from "../Child/child.component";
 import { Input } from "@angular/core";
 import { Hotel } from "./hotel";
+import { CurrencyPipe } from "@angular/common";
+import { FormsModule } from "@angular/forms";
 
 @Component({
   selector: 'app-hotel-item',
   standalone: true,
   templateUrl: './HotelItem.component.html',
-  imports: [ChildComponent],
+  imports: [ChildComponent, CurrencyPipe, FormsModule],
 })
 export class HotelItem {
   @Input() public hotel!: Hotel;
+  public selectedLanguage?: string;
+
+  public languageChange(lang: string) {
+    this.selectedLanguage = lang;
+    console.log(this.selectedLanguage);
+  }
+
+  public langs = [
+    {
+      "lang": "en",
+      "code": "en-US"
+    },
+    {
+      "lang": "cn",
+      "code": "cn-CN"
+    },
+    {
+      "lang": "de",
+      "code": "de-DE"
+    }
+  ];
 }

src/app/app.component.html

@@ -1,6 +1,11 @@
+<h1>{{'hello' | uppercase | text}}</h1>
 <app-search [(input)]="search"></app-search>
-<div *ngFor="let hotel of hotels">
+@for (hotel of hotels; track hotel.hotelId) {
-  @if (hotel.hotelName.includes(search)) {
+  @let should_show = search === "" || hotel.hotelName.includes(search);
+  @if (should_show) {
     <app-hotel-item [hotel]="hotel"></app-hotel-item>
   }
-</div>
+}
+@if (!has_hotels()) {
+  <p>No hotels found</p>
+}

src/app/app.component.ts

@@ -1,12 +1,13 @@
 import { Component, input } from '@angular/core';
 import { HotelItem } from './HotelItem/HotelItem.component';
-import { CommonModule } from '@angular/common';
 import { SearchComponent } from './Search/search.component';
+import { UpperCasePipe } from '@angular/common';
+import { TextPipe } from '../text.pipe';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [HotelItem, CommonModule, SearchComponent],
+  imports: [HotelItem, SearchComponent, UpperCasePipe, TextPipe],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css'
 })
@@ -17,6 +18,15 @@ export class AppComponent {
     console.log(this.search);
   }
 
+  public has_hotels(): boolean {
+    for (let hotel of this.hotels) {
+      if (hotel.hotelName.includes(this.search)) {
+        return true;
+      }
+    }
+    return false;
+  }
+
   public hotels = [
     {
       "hotelId": 1,

src/app/app.config.ts

@@ -1,8 +1,13 @@
 import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
 import { provideRouter } from '@angular/router';
+import localeDe from '@angular/common/locales/de';
+import localeCn from '@angular/common/locales/zh-Hans';
 
 import { routes } from './app.routes';
+import { registerLocaleData } from '@angular/common';
 
+registerLocaleData(localeDe, 'de-DE');
+registerLocaleData(localeCn, 'cn-CN');
 export const appConfig: ApplicationConfig = {
   providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)]
 };

src/currency.pipe.ts

@@ -0,0 +1,11 @@
+import {Pipe, PipeTransform} from '@angular/core';
+
+@Pipe({
+  name: 'jkcurrency',
+  standalone: true
+})
+export class CurrencyPipe implements PipeTransform {
+  transform(value: string): string {
+    return value.replaceAll("L", "P");
+  }
+}

src/text.pipe.ts

@@ -0,0 +1,11 @@
+import {Pipe, PipeTransform} from '@angular/core';
+
+@Pipe({
+  name: 'text',
+  standalone: true
+})
+export class TextPipe implements PipeTransform {
+  transform(value: string): string {
+    return value.replaceAll("L", "P");
+  }
+}