How to change date format and currency based on chosen language in JHipster

I declared two languages in my JHipster app: en and pl.

In AngularJS version, switching language in navbar menu, changing date format and currency.

In Angular 5 version, there is only one english version, currency is $.

To have it like in AngularJS, new custom pipes are necessarily.

For date format:

In src/main/webapp/app/shared/language create localizedDatepipe.ts:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

import {DatePipe} from '@angular/common'; import {Pipe, PipeTransform} from '@angular/core'; import {JhiLanguageService} from 'ng-jhipster'; import {registerLocaleData} from '@angular/common'; import localePl from '@angular/common/locales/pl'; @Pipe({ name: 'localizedDate' }) export class LocalizedDatePipe implements PipeTransform { lang = 'en'; constructor( private languageService: JhiLanguageService) { this.getlang(); } getlang() { this.languageService.getCurrent().then(function(langKeyValue) { registerLocaleData(localePl, 'pl'); switch (langKeyValue) { case 'en': { this.lang = 'en'; break; } case 'pl': { this.lang = 'pl'; break; } } }.bind(this)); } transform(value: any, pattern = 'mediumDate'): any { const datePipe: DatePipe = new DatePipe(this.lang); return datePipe.transform(value, pattern); } }

Import it in src/main/webapp/app/shared/shared-common.module.ts:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

import { LocalizedDatePipe } from './language/localizedDate.pipe'; . . . @NgModule({ declarations: [ . . . LocalizedDatePipe ], providers: [ . . . ], exports: [ . . LocalizedDatePipe

Then in entity.component.html use pipe:

<td>{{testE.entDate | localizedDate:'medium'}}</td>

---------------------------------

For currency format:

In src/main/webapp/app/shared/language create localizedCurrency.ts:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

import { CurrencyPipe } from '@angular/common' import {Pipe, PipeTransform} from '@angular/core'; import {JhiLanguageService} from 'ng-jhipster'; import {registerLocaleData} from '@angular/common'; import localePl from '@angular/common/locales/pl'; @Pipe({ name: 'localizedCurrency' }) export class LocalizedCurrencyPipe implements PipeTransform { lang = 'en'; currency = '$'; constructor( private languageService: JhiLanguageService) { this.getlang(); } getlang() { this.languageService.getCurrent().then(function(langKeyValue) { registerLocaleData(localePl, 'pl'); switch (langKeyValue) { case 'en': { this.lang = 'en'; this.currency = '$'; break; } case 'pl': { this.lang = 'pl'; this.currency = 'zł'; break; } } }.bind(this)); } transform(value: any): any { const currencyPipe: CurrencyPipe = new CurrencyPipe(this.lang); return currencyPipe.transform(value, this.currency); } }

And import it in src/main/webapp/app/shared/shared-common.module.ts as above for 'localizedDate'.

In html component use pipe like this:

<td>{{testE.price | localizedCurrency}}</td>