diff --git a/ngx-translate-demo-standalone-icu/public/i18n/de.json b/ngx-translate-demo-standalone-icu/public/i18n/de.json index d599942..c78d540 100644 --- a/ngx-translate-demo-standalone-icu/public/i18n/de.json +++ b/ngx-translate-demo-standalone-icu/public/i18n/de.json @@ -1,16 +1,6 @@ { - "demo": { - "greeting": "Hallo {name}!", - "text": "Dies ist eine einfache Applikation um die Funktionen von ngx-transalte zu demonstrieren.", - "title": "Übersetzungs-Demo" - }, "icu": { "pluralization": "Da {count, plural, =0{ist kein Apfel} one{ist ein Apfel} other{sind mehrere Äpfel}}.", "select": "{gender, select, male{Er verwendet} female{Sie verwendet} other{Sie verwenden }} {product}." - }, - "messagebox": { - "warning": { - "text": "Warnung!" - } } } diff --git a/ngx-translate-demo-standalone-icu/public/i18n/en.json b/ngx-translate-demo-standalone-icu/public/i18n/en.json index 586b44d..b87cd4e 100644 --- a/ngx-translate-demo-standalone-icu/public/i18n/en.json +++ b/ngx-translate-demo-standalone-icu/public/i18n/en.json @@ -1,16 +1,6 @@ { - "demo": { - "greeting": "Hello {name}!", - "text": "This is a simple demonstration app for ngx-translate", - "title": "Translation demo" - }, "icu": { "pluralization": "There {count, plural, =0{is no apple} one{is one apple} other{there are several apples}}.", "select": "{gender, select, male{He uses} female{She uses} other{They use }} {product}" - }, - "messagebox": { - "warning": { - "text": "Warning!" - } } } diff --git a/ngx-translate-demo-standalone-icu/src/app/app.component.html b/ngx-translate-demo-standalone-icu/src/app/app.component.html index 58f627d..ac79c34 100644 --- a/ngx-translate-demo-standalone-icu/src/app/app.component.html +++ b/ngx-translate-demo-standalone-icu/src/app/app.component.html @@ -16,7 +16,7 @@

Pluralization

-

icu.pluralization

+

icu.pluralization

{{'icu.pluralization' | translate:{ count } }}

Selection

diff --git a/ngx-translate-demo-standalone-icu/src/app/app.component.i18n.spec.ts b/ngx-translate-demo-standalone-icu/src/app/app.component.i18n.spec.ts new file mode 100644 index 0000000..f7a96e2 --- /dev/null +++ b/ngx-translate-demo-standalone-icu/src/app/app.component.i18n.spec.ts @@ -0,0 +1,74 @@ +import { TestBed } from '@angular/core/testing'; +import { AppComponent } from './app.component'; +import {} from 'jasmine'; +import {TranslateCompiler, TranslateLoader, TranslateModule, TranslateService} from "@ngx-translate/core"; +import {StaticTranslationLoader} from "./static-translations-loader"; +import {TranslateMessageFormatCompiler} from "ngx-translate-messageformat-compiler"; + + +describe('AppComponent Localized', () => { + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [ + AppComponent, + TranslateModule.forRoot({ + loader: { + provide: TranslateLoader, + useClass: StaticTranslationLoader, + }, + compiler: { + provide: TranslateCompiler, + useClass: TranslateMessageFormatCompiler + } + })], + providers: [] + }).compileComponents(); + + const translateService = TestBed.inject(TranslateService); + translateService.addLangs(["de", "en"]); + translateService.setDefaultLang('en'); + }); + + + it('should create the app', () => { + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.componentInstance; + expect(app).toBeTruthy(); + }); + + + it('should render pluralization for 0 in english (default)', () => { + const fixture = TestBed.createComponent(AppComponent); + fixture.detectChanges(); + const compiled = fixture.nativeElement as HTMLElement; + expect(compiled.querySelector('#icuPluralization')?.textContent).toContain('There is no apple.'); + }); + + + it('should render pluralization for 0 in german', () => { + const fixture = TestBed.createComponent(AppComponent); + fixture.detectChanges(); + + const translateService = TestBed.inject(TranslateService); + translateService.use('de'); + + fixture.detectChanges(); + const compiled = fixture.nativeElement as HTMLElement; + expect(compiled.querySelector('#icuPluralization')?.textContent).toContain('Da ist kein Apfel.'); + }); + + + it('should render pluralization for 1 in English (default) after selecting from combo box', () => { + const fixture = TestBed.createComponent(AppComponent); + fixture.detectChanges(); + + const compiled = fixture.nativeElement as HTMLElement; + + const selectElement = compiled.querySelector('#count-select') as HTMLSelectElement; + selectElement.value = '1'; + selectElement.dispatchEvent(new Event('change')); + fixture.detectChanges(); + + expect(compiled.querySelector('#icuPluralization')?.textContent).toContain('There is one apple.'); + }); +}); diff --git a/ngx-translate-demo-standalone-icu/src/app/app.component.scss b/ngx-translate-demo-standalone-icu/src/app/app.component.scss index ac2c0ed..04798aa 100644 --- a/ngx-translate-demo-standalone-icu/src/app/app.component.scss +++ b/ngx-translate-demo-standalone-icu/src/app/app.component.scss @@ -12,7 +12,7 @@ p, .translated } button { - background-color: #008CBA; // Initial background color + background-color: #008CBA; border: none; color: white; padding: 0.25rem 0.5rem; @@ -21,19 +21,18 @@ button { display: inline-block; font-size: 16px; margin-left: 1rem; - border-radius: 0.5rem; // Rounded corners - transition: background-color 0.3s ease; // Smooth transition on hover + border-radius: 0.5rem; + transition: background-color 0.3s ease; &:hover { - background-color: #005f73; // Background color on hover + background-color: #005f73; } } - .title { background-color: #bde8f8; padding: 0.5rem 2rem 1.5rem 2rem; position: sticky; - top: 0; /* Sticks the element to the top of the container/viewport */ - z-index: 1000; /* Optional: ensures the title stays above other content */ + top: 0; + z-index: 1000; } \ No newline at end of file diff --git a/ngx-translate-demo-standalone-icu/src/app/app.component.spec.ts b/ngx-translate-demo-standalone-icu/src/app/app.component.spec.ts index 2a01427..e5b9c71 100644 --- a/ngx-translate-demo-standalone-icu/src/app/app.component.spec.ts +++ b/ngx-translate-demo-standalone-icu/src/app/app.component.spec.ts @@ -1,74 +1,23 @@ import { TestBed } from '@angular/core/testing'; import { AppComponent } from './app.component'; import {} from 'jasmine'; -import {TranslateCompiler, TranslateLoader, TranslateModule, TranslateService} from "@ngx-translate/core"; -import {StaticTranslationLoader} from "./static-translations-loader"; -import {TranslateMessageFormatCompiler} from "ngx-translate-messageformat-compiler"; +import {TranslateModule} from "@ngx-translate/core"; -describe('AppComponent Localized', () => { +describe('AppComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ imports: [ AppComponent, - TranslateModule.forRoot({ - loader: { - provide: TranslateLoader, - useClass: StaticTranslationLoader, - }, - compiler: { - provide: TranslateCompiler, - useClass: TranslateMessageFormatCompiler - } - })], - providers: [] + TranslateModule.forRoot({}) + ], }).compileComponents(); - - const translateService = TestBed.inject(TranslateService); - translateService.addLangs(["de", "en"]); - translateService.setDefaultLang('en'); }); - it('should create the app', () => { const fixture = TestBed.createComponent(AppComponent); const app = fixture.componentInstance; expect(app).toBeTruthy(); }); - - it('should render pluralization for 0 in english (default)', () => { - const fixture = TestBed.createComponent(AppComponent); - fixture.detectChanges(); - const compiled = fixture.nativeElement as HTMLElement; - expect(compiled.querySelector('#icuPluralization')?.textContent).toContain('There is no apple.'); - }); - - - it('should render pluralization for 0 in german', () => { - const fixture = TestBed.createComponent(AppComponent); - fixture.detectChanges(); - - const translateService = TestBed.inject(TranslateService); - translateService.use('de'); - - fixture.detectChanges(); - const compiled = fixture.nativeElement as HTMLElement; - expect(compiled.querySelector('#icuPluralization')?.textContent).toContain('Da ist kein Apfel.'); - }); - - - it('should render pluralization for 1 in English (default) after selecting from combo box', () => { - const fixture = TestBed.createComponent(AppComponent); - fixture.detectChanges(); - - const compiled = fixture.nativeElement as HTMLElement; - - const selectElement = compiled.querySelector('#count-select') as HTMLSelectElement; - selectElement.value = '1'; - selectElement.dispatchEvent(new Event('change')); - fixture.detectChanges(); - - expect(compiled.querySelector('#icuPluralization')?.textContent).toContain('There is one apple.'); - }); }); diff --git a/ngx-translate-demo-standalone-icu/src/app/app.config.ts b/ngx-translate-demo-standalone-icu/src/app/app.config.ts index 7175a90..e0f2c41 100644 --- a/ngx-translate-demo-standalone-icu/src/app/app.config.ts +++ b/ngx-translate-demo-standalone-icu/src/app/app.config.ts @@ -1,15 +1,15 @@ import {ApplicationConfig, importProvidersFrom, provideZoneChangeDetection} from "@angular/core"; import {provideHttpClient} from "@angular/common/http"; import {TranslateModule, TranslateLoader, TranslateCompiler} from "@ngx-translate/core"; -import { TranslateHttpLoader } from '@ngx-translate/http-loader'; -import { HttpClient } from '@angular/common/http'; -import {TranslateMessageFormatCompiler} from "ngx-translate-messageformat-compiler"; +import {TranslateHttpLoader} from '@ngx-translate/http-loader'; +import {HttpClient} from '@angular/common/http'; + +import {TranslateMessageFormatCompiler} from 'ngx-translate-messageformat-compiler'; const httpLoaderFactory: (http: HttpClient) => TranslateHttpLoader = (http: HttpClient) => new TranslateHttpLoader(http, './i18n/', '.json'); - export const appConfig: ApplicationConfig = { providers: [ provideZoneChangeDetection({ eventCoalescing: true }), diff --git a/ngx-translate-demo-standalone-icu/translations.babel b/ngx-translate-demo-standalone-icu/translations.babel index ddb13c1..b62f999 100644 --- a/ngx-translate-demo-standalone-icu/translations.babel +++ b/ngx-translate-demo-standalone-icu/translations.babel @@ -22,96 +22,91 @@ demo - - greeting - - - - - de-DE - false - - - en-US - false - - - - - text - - - - - de-DE - false - - - en-US - false - - - - - title - - - - - de-DE - false - - - en-US - false - - - - - - - icu - - - pluralization - - - - - de-DE - false - - - en-US - false - - - - - select - - - - - de-DE - false - - - en-US - false - - - - - - - messagebox - - warning + interpolation + + + attribute-with-parameters + + + + + de-DE + false + + + en-US + false + + + + + id-as-content-with-parameters + + + + + de-DE + false + + + en-US + false + + + + + pipe-with-parameters + + + + + de-DE + false + + + en-US + false + + + + + + + simple - text + text-as-attribute + + + + + de-DE + false + + + en-US + false + + + + + text-as-content + + + + + de-DE + false + + + en-US + false + + + + + text-with-pipe @@ -127,6 +122,21 @@ + + title + + + + + de-DE + false + + + en-US + false + + +