diff --git a/src/app/app.component.css b/src/app/app.component.css index e69de29..8b13789 100644 --- a/src/app/app.component.css +++ b/src/app/app.component.css @@ -0,0 +1 @@ + diff --git a/src/app/app.component.ts b/src/app/app.component.ts index a38113b..a9fd26b 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -3,13 +3,15 @@ import {Child1Component} from "./child/child-1/child-1.component"; import {Child2Component} from "./child/child-2/child-2.component"; import {ParentComponent} from "./child/parent/parent.component"; import {HotelsComponent} from "./hotel/hotels.component"; +import {IdkComponent} from "./idek/idk.component"; @Component({ selector: 'app-root', standalone: true, - imports: [Child1Component, Child2Component, ParentComponent, HotelsComponent], + imports: [Child1Component, Child2Component, ParentComponent, HotelsComponent, IdkComponent], template: ` + ` }) export class AppComponent { diff --git a/src/app/app.config.ts b/src/app/app.config.ts index a1e7d6f..82a7b0c 100644 --- a/src/app/app.config.ts +++ b/src/app/app.config.ts @@ -1,8 +1,14 @@ import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core'; import { provideRouter } from '@angular/router'; - import { routes } from './app.routes'; +import {registerLocaleData} from "@angular/common"; +import localeDe from "@angular/common/locales/de" +import localeCn from "@angular/common/locales/en" +import localeJap from "@angular/common/locales/en" +registerLocaleData(localeDe, 'de-DE') +registerLocaleData(localeCn, 'cn-CN') +registerLocaleData(localeJap, 'ja-JP') export const appConfig: ApplicationConfig = { providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)] }; diff --git a/src/app/hotel/hotel.component.ts b/src/app/hotel/hotel.component.ts index cafc67c..27e4a3b 100644 --- a/src/app/hotel/hotel.component.ts +++ b/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: `
-

Name: {{hotel.hotelName}}

-

Beschreibung: {{hotel.description}}

-

Preis: {{hotel.price}}/nacht

-

Sterne: {{hotel.rating}}/5

+

Name: {{ hotel.hotelName }}

+

Beschreibung: {{ hotel.description }}

+

Preis: {{ hotel.price | currency: currency.currency : 'symbol' : '2.2-2' : currency.code }}/nacht

+

Sterne:

` }) export class HotelComponent { + @Input() + public currency: Lang = {name: 'de', code: 'de-DE', currency: 'EUR'} @Input() public hotel!: Hotel; } diff --git a/src/app/hotel/hotels.component.ts b/src/app/hotel/hotels.component.ts index 8bf634c..06c3c02 100644 --- a/src/app/hotel/hotels.component.ts +++ b/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: ` +
@for (hotel of matchingHotels; track hotel.hotelId) { - +
} @empty {

no matching results for {{search}}

@@ -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 = [] diff --git a/src/app/idek/idk.component.ts b/src/app/idek/idk.component.ts new file mode 100644 index 0000000..b73cd34 --- /dev/null +++ b/src/app/idek/idk.component.ts @@ -0,0 +1,54 @@ +import {Component} from "@angular/core"; +import {CurrencyPipe, UpperCasePipe} from "@angular/common"; +import {TestPipe} from "./test.pipe"; +import {FormsModule} from "@angular/forms"; +import {Lang} from "./lang"; + +@Component({ + selector: 'app-idk', + standalone: true, + imports: [UpperCasePipe, TestPipe, CurrencyPipe, FormsModule], + template: ` + + {{ 234 | currency : currency.currency : 'symbol' : '2.2-2' : currency.code }} + ` +}) +export class IdkComponent { + 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 setCurrency(currencyInput: string): void { + for (const currency of this.currencies) { + if (currency.name === currencyInput) { + this.currency = currency; + break; + } + } + } +} diff --git a/src/app/idek/lang.ts b/src/app/idek/lang.ts new file mode 100644 index 0000000..9c5d42d --- /dev/null +++ b/src/app/idek/lang.ts @@ -0,0 +1,5 @@ +export interface Lang { + code: string; + name: string; + currency: string; +} diff --git a/src/app/idek/test.pipe.ts b/src/app/idek/test.pipe.ts new file mode 100644 index 0000000..7098a15 --- /dev/null +++ b/src/app/idek/test.pipe.ts @@ -0,0 +1,11 @@ +import {Pipe, PipeTransform} from "@angular/core"; + +@Pipe({ + name: 'idk', + standalone: true, +}) +export class TestPipe implements PipeTransform { + transform(value: string): string { + return value.toLowerCase().replaceAll('l', 'p'); + } +} diff --git a/src/app/star/star.component.spec.ts b/src/app/star/star.component.spec.ts new file mode 100644 index 0000000..421ff18 --- /dev/null +++ b/src/app/star/star.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { StarComponent } from './star.component'; + +describe('StarComponent', () => { + let component: StarComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [StarComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(StarComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/star/star.component.ts b/src/app/star/star.component.ts new file mode 100644 index 0000000..6c9e940 --- /dev/null +++ b/src/app/star/star.component.ts @@ -0,0 +1,27 @@ +import {Component, Input} from '@angular/core'; + +@Component({ + selector: 'app-star', + standalone: true, + imports: [], + template: ` + @for (_ of getList(); track null) { + test + + } + @if (rating % 1 >= 0.5) { + + } + + `, +}) +export class StarComponent { + @Input() + public rating: number = 0; + + public getList(): null[] { + console.log(this.rating) + console.log(Array(this.rating).fill(null)) + return Array(this.rating).fill(null); + } +} diff --git a/src/index.html b/src/index.html index b51fcb5..808857f 100644 --- a/src/index.html +++ b/src/index.html @@ -8,6 +8,7 @@ +