diff --git a/src/app/HotelItem/HotelItem.component.html b/src/app/HotelItem/HotelItem.component.html index 794b874..6d830d3 100644 --- a/src/app/HotelItem/HotelItem.component.html +++ b/src/app/HotelItem/HotelItem.component.html @@ -1,5 +1,10 @@

Name: {{hotel.hotelName}}

Description: {{hotel.description}}

-

Price: {{hotel.price}}$

+

Price: {{hotel.price | currency : "EUR" : "symbol" : "2.2-2" : "de-DE"}}

+ Hotel

{{hotel.rating}}

diff --git a/src/app/HotelItem/HotelItem.component.ts b/src/app/HotelItem/HotelItem.component.ts index c15a1e8..163edf9 100644 --- a/src/app/HotelItem/HotelItem.component.ts +++ b/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" + } + ]; } diff --git a/src/app/app.component.html b/src/app/app.component.html index 4d40811..6bad2be 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,6 +1,11 @@ +

{{'hello' | uppercase | text}}

-
- @if (hotel.hotelName.includes(search)) { +@for (hotel of hotels; track hotel.hotelId) { + @let should_show = search === "" || hotel.hotelName.includes(search); + @if (should_show) { } -
+} +@if (!has_hotels()) { +

No hotels found

+} diff --git a/src/app/app.component.ts b/src/app/app.component.ts index e1c43ab..74909ec 100644 --- a/src/app/app.component.ts +++ b/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, diff --git a/src/app/app.config.ts b/src/app/app.config.ts index a1e7d6f..15f165b 100644 --- a/src/app/app.config.ts +++ b/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)] }; diff --git a/src/currency.pipe.ts b/src/currency.pipe.ts new file mode 100644 index 0000000..353920a --- /dev/null +++ b/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"); + } +} diff --git a/src/text.pipe.ts b/src/text.pipe.ts new file mode 100644 index 0000000..cccbe4e --- /dev/null +++ b/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"); + } +}