From 239834dfab4762ff41d9eb644befc6f2182ced50 Mon Sep 17 00:00:00 2001 From: Roberto Simonetti Date: Thu, 11 Nov 2021 16:29:15 +0100 Subject: [PATCH] Update apps --- .../src/app/app.component.html | 5 ++- .../src/app/conversions.ts | 19 +++++++++++ .../src/app/home/api/api.component.html | 6 +++- .../src/app/home/api/api.component.ts | 33 ++++++++++++++++--- .../home/directive/directive.component.html | 3 +- .../app/home/directive/directive.component.ts | 12 +++++-- .../src/app/home/home.component.html | 6 ++-- .../src/app/home/home.component.ts | 1 - .../src/app/home/pipe/pipe.component.html | 6 +++- .../src/app/home/pipe/pipe.component.ts | 6 +++- .../src/app/l10n-config.ts | 4 +-- .../src/assets/i18n/app-en-US.json | 6 +++- .../src/assets/i18n/app-it-IT.json | 6 +++- .../src/app/home/api/api.component.ts | 13 ++++---- .../home/directive/directive.component.html | 2 +- .../app/home/directive/directive.component.ts | 1 - .../src/app/home/home.component.html | 6 ++-- .../src/app/home/home.component.ts | 1 - .../src/app/home/pipe/pipe.component.html | 6 ++-- .../src/app/home/pipe/pipe.component.ts | 1 - .../src/assets/i18n/app-en-US.json | 6 ++-- .../src/assets/i18n/app-it-IT.json | 6 ++-- 22 files changed, 114 insertions(+), 41 deletions(-) create mode 100644 projects/angular-l10n-app-ssr/src/app/conversions.ts diff --git a/projects/angular-l10n-app-ssr/src/app/app.component.html b/projects/angular-l10n-app-ssr/src/app/app.component.html index 7bcb0992..685492d2 100644 --- a/projects/angular-l10n-app-ssr/src/app/app.component.html +++ b/projects/angular-l10n-app-ssr/src/app/app.component.html @@ -10,6 +10,9 @@

{{ 'changeLocale' | translate:locale.language }}

- + + + \ No newline at end of file diff --git a/projects/angular-l10n-app-ssr/src/app/conversions.ts b/projects/angular-l10n-app-ssr/src/app/conversions.ts new file mode 100644 index 00000000..497e2bd2 --- /dev/null +++ b/projects/angular-l10n-app-ssr/src/app/conversions.ts @@ -0,0 +1,19 @@ +import { L10nLocale } from "angular-l10n"; + +export const convertCurrency = (value: number, locale: L10nLocale, rate: number) => { + switch (locale.currency) { + case "USD": + return value * rate; + default: + return value; + } +}; + +export const convertLength = (value: number, locale: L10nLocale) => { + switch (locale.units['length']) { + case "mile": + return value * 0.621371; + default: + return value; + } +}; \ No newline at end of file diff --git a/projects/angular-l10n-app-ssr/src/app/home/api/api.component.html b/projects/angular-l10n-app-ssr/src/app/home/api/api.component.html index e0c6750e..1a3a840f 100644 --- a/projects/angular-l10n-app-ssr/src/app/home/api/api.component.html +++ b/projects/angular-l10n-app-ssr/src/app/home/api/api.component.html @@ -6,4 +6,8 @@

APIs

{{ formattedToday }}

{{ formattedTimeAgo }}


-

{{ formattedValue }}

\ No newline at end of file +

{{ formattedValue }}

+

{{ formattedLength }}

+
+

1 {{ formattedOnePlural }}

+

2 {{ formattedOtherPlural }}

\ No newline at end of file diff --git a/projects/angular-l10n-app-ssr/src/app/home/api/api.component.ts b/projects/angular-l10n-app-ssr/src/app/home/api/api.component.ts index 3c5dd056..8f17bb4e 100644 --- a/projects/angular-l10n-app-ssr/src/app/home/api/api.component.ts +++ b/projects/angular-l10n-app-ssr/src/app/home/api/api.component.ts @@ -1,6 +1,8 @@ import { Component, OnInit, OnChanges, SimpleChanges, Input } from '@angular/core'; -import { L10nTranslationService, L10nIntlService } from 'angular-l10n'; +import { L10nTranslationService, L10nIntlService, L10nLocale } from 'angular-l10n'; + +import { convertCurrency, convertLength } from '../../conversions'; @Component({ selector: 'app-api', @@ -11,7 +13,6 @@ export class ApiComponent implements OnInit, OnChanges { @Input() today: number; @Input() timeAgo: string; - @Input() value: number; greeting: string; whoIAm: string; @@ -20,19 +21,41 @@ export class ApiComponent implements OnInit, OnChanges { formattedToday: string; formattedTimeAgo: string; formattedValue: string; + formattedLength: string; + formattedOnePlural: string; + formattedOtherPlural: string; - constructor(private translation: L10nTranslationService, private intl: L10nIntlService) { } + constructor( + private translation: L10nTranslationService, + private intl: L10nIntlService + ) { } ngOnInit() { this.translation.onChange().subscribe({ - next: () => { + next: (locale: L10nLocale) => { this.greeting = this.translation.translate('home.greeting'); this.whoIAm = this.translation.translate('home.whoIAm', { name: 'Angular l10n' }); this.description = this.translation.translate('home.description'); this.formattedToday = this.intl.formatDate(this.today, { dateStyle: 'full', timeStyle: 'short' }); this.formattedTimeAgo = this.intl.formatRelativeTime(this.timeAgo, 'second', { numeric: 'always', style: 'long' }); - this.formattedValue = this.intl.formatNumber(this.value, { digits: '1.2-2', style: 'currency' }); + this.formattedValue = this.intl.formatNumber( + 1000, + { digits: '1.2-2', style: 'currency' }, + undefined, + undefined, + convertCurrency, + { rate: 1.16 } + ); + this.formattedLength = this.intl.formatNumber( + 1, + { digits: '1.0-2', style: 'unit', unit: locale.units['length'] }, + undefined, + undefined, + convertLength + ); + this.formattedOnePlural = this.intl.plural(1, 'home.devs', { type: 'cardinal' }); + this.formattedOtherPlural = this.intl.plural(2, 'home.devs', { type: 'cardinal' }); } }); } diff --git a/projects/angular-l10n-app-ssr/src/app/home/directive/directive.component.html b/projects/angular-l10n-app-ssr/src/app/home/directive/directive.component.html index 6dd54c66..c1ab9778 100644 --- a/projects/angular-l10n-app-ssr/src/app/home/directive/directive.component.html +++ b/projects/angular-l10n-app-ssr/src/app/home/directive/directive.component.html @@ -7,4 +7,5 @@

Directives

{{ today }}

{{ timeAgo }}


-

{{ value }}

\ No newline at end of file +

1000

+

1

\ No newline at end of file diff --git a/projects/angular-l10n-app-ssr/src/app/home/directive/directive.component.ts b/projects/angular-l10n-app-ssr/src/app/home/directive/directive.component.ts index 6e50dd86..75180df8 100644 --- a/projects/angular-l10n-app-ssr/src/app/home/directive/directive.component.ts +++ b/projects/angular-l10n-app-ssr/src/app/home/directive/directive.component.ts @@ -1,4 +1,7 @@ -import { Component, OnInit, Input } from '@angular/core'; +import { Component, OnInit, Input, Inject } from '@angular/core'; +import { L10nLocale, L10N_LOCALE } from 'angular-l10n'; + +import { convertCurrency, convertLength } from '../../conversions'; @Component({ selector: 'app-directive', @@ -9,7 +12,12 @@ export class DirectiveComponent implements OnInit { @Input() today: number; @Input() timeAgo: string; - @Input() value: number; + + convertCurrency = convertCurrency; + convertLength = convertLength; + + constructor(@Inject(L10N_LOCALE) public locale: L10nLocale) { + } ngOnInit() { } diff --git a/projects/angular-l10n-app-ssr/src/app/home/home.component.html b/projects/angular-l10n-app-ssr/src/app/home/home.component.html index a4ff0e0e..ff8172f9 100644 --- a/projects/angular-l10n-app-ssr/src/app/home/home.component.html +++ b/projects/angular-l10n-app-ssr/src/app/home/home.component.html @@ -5,12 +5,12 @@

{{ 'home.subtitle' | translate:locale.language }}

- +
- +
- +
\ No newline at end of file diff --git a/projects/angular-l10n-app-ssr/src/app/home/home.component.ts b/projects/angular-l10n-app-ssr/src/app/home/home.component.ts index 2d9852f9..18797eef 100644 --- a/projects/angular-l10n-app-ssr/src/app/home/home.component.ts +++ b/projects/angular-l10n-app-ssr/src/app/home/home.component.ts @@ -13,7 +13,6 @@ export class HomeComponent implements OnInit { today = Date.now(); timeAgo = '-0'; - value = Math.round(Math.random() * 1000000) / 100; constructor(@Inject(L10N_LOCALE) public locale: L10nLocale) { } diff --git a/projects/angular-l10n-app-ssr/src/app/home/pipe/pipe.component.html b/projects/angular-l10n-app-ssr/src/app/home/pipe/pipe.component.html index 5126cc8c..61029d7f 100644 --- a/projects/angular-l10n-app-ssr/src/app/home/pipe/pipe.component.html +++ b/projects/angular-l10n-app-ssr/src/app/home/pipe/pipe.component.html @@ -6,4 +6,8 @@

Pure Pipes

{{ today | l10nDate:locale.language:{ dateStyle: 'full', timeStyle: 'short' } }}

{{ timeAgo | l10nTimeAgo:locale.language:'second':{ numeric:'always', style:'long' } }}


-

{{ value | l10nNumber:locale.language:{ digits: '1.2-2', style: 'currency' } }}

\ No newline at end of file +

{{ 1000 | l10nNumber:locale.language:{ digits: '1.2-2', style: 'currency' }:locale.currency:convertCurrency:{ rate: 1.16 } }}

+

{{ 1 | l10nNumber:locale.language:{ digits: '1.0-2', style: 'unit', unit: locale.units['length'] }:undefined:convertLength }}

+
+

1 {{ 1 | l10nPlural:locale.language:'home.devs':{ type: 'cardinal' } }}

+

2 {{ 2 | l10nPlural:locale.language:'home.devs':{ type: 'cardinal' } }}

\ No newline at end of file diff --git a/projects/angular-l10n-app-ssr/src/app/home/pipe/pipe.component.ts b/projects/angular-l10n-app-ssr/src/app/home/pipe/pipe.component.ts index 8e4c27be..befa4a10 100644 --- a/projects/angular-l10n-app-ssr/src/app/home/pipe/pipe.component.ts +++ b/projects/angular-l10n-app-ssr/src/app/home/pipe/pipe.component.ts @@ -2,6 +2,8 @@ import { Component, OnInit, Inject, Input } from '@angular/core'; import { L10N_LOCALE, L10nLocale } from 'angular-l10n'; +import { convertCurrency, convertLength } from '../../conversions'; + @Component({ selector: 'app-pipe', templateUrl: './pipe.component.html', @@ -11,7 +13,9 @@ export class PipeComponent implements OnInit { @Input() today: number; @Input() timeAgo: string; - @Input() value: number; + + convertCurrency = convertCurrency; + convertLength = convertLength; constructor(@Inject(L10N_LOCALE) public locale: L10nLocale) { } diff --git a/projects/angular-l10n-app-ssr/src/app/l10n-config.ts b/projects/angular-l10n-app-ssr/src/app/l10n-config.ts index a825db45..5428f2b4 100644 --- a/projects/angular-l10n-app-ssr/src/app/l10n-config.ts +++ b/projects/angular-l10n-app-ssr/src/app/l10n-config.ts @@ -30,8 +30,8 @@ export const l10nConfig: L10nConfig = { keySeparator: '.', defaultLocale: { language: 'en-US', currency: 'USD', timeZone: 'America/Los_Angeles' }, schema: [ - { locale: { language: 'en-US', currency: 'USD', timeZone: 'America/Los_Angeles' }, dir: 'ltr', text: 'United States' }, - { locale: { language: 'it-IT', currency: 'EUR', timeZone: 'Europe/Rome' }, dir: 'ltr', text: 'Italia' } + { locale: { language: 'en-US', currency: 'USD', timeZone: 'America/Los_Angeles', units: { 'length': 'mile' } }, dir: 'ltr', text: 'United States' }, + { locale: { language: 'it-IT', currency: 'EUR', timeZone: 'Europe/Rome', units: { 'length': 'kilometer' } }, dir: 'ltr', text: 'Italia' } ], defaultRouting: true }; diff --git a/projects/angular-l10n-app-ssr/src/assets/i18n/app-en-US.json b/projects/angular-l10n-app-ssr/src/assets/i18n/app-en-US.json index 1fb7f750..296fea5d 100644 --- a/projects/angular-l10n-app-ssr/src/assets/i18n/app-en-US.json +++ b/projects/angular-l10n-app-ssr/src/assets/i18n/app-en-US.json @@ -5,7 +5,11 @@ "subtitle": "The world is small", "greeting": "Hello world!", "whoIAm": "I am {{name}}", - "description": "An Angular library to translate texts, dates and numbers" + "description": "An Angular library to translate texts, dates and numbers", + "devs": { + "one": "software developer", + "other": "software developers" + } }, "onPush": { "title": "OnPush Change detection strategy" diff --git a/projects/angular-l10n-app-ssr/src/assets/i18n/app-it-IT.json b/projects/angular-l10n-app-ssr/src/assets/i18n/app-it-IT.json index 96ed5f84..6fc50e35 100644 --- a/projects/angular-l10n-app-ssr/src/assets/i18n/app-it-IT.json +++ b/projects/angular-l10n-app-ssr/src/assets/i18n/app-it-IT.json @@ -5,7 +5,11 @@ "subtitle": "Il mondo รจ piccolo", "greeting": "Ciao mondo!", "whoIAm": "Sono {{name}}", - "description": "Una libreria Angular per tradurre testi, date e numeri" + "description": "Una libreria Angular per tradurre testi, date e numeri", + "devs":{ + "one": "sviluppatore software", + "other": "sviluppatori software" + } }, "onPush": { "title": "Strategia di rilevamento del cambiamento OnPush" diff --git a/projects/angular-l10n-app/src/app/home/api/api.component.ts b/projects/angular-l10n-app/src/app/home/api/api.component.ts index d4deb7cf..8f17bb4e 100644 --- a/projects/angular-l10n-app/src/app/home/api/api.component.ts +++ b/projects/angular-l10n-app/src/app/home/api/api.component.ts @@ -1,6 +1,6 @@ import { Component, OnInit, OnChanges, SimpleChanges, Input } from '@angular/core'; -import { L10nTranslationService, L10nIntlService } from 'angular-l10n'; +import { L10nTranslationService, L10nIntlService, L10nLocale } from 'angular-l10n'; import { convertCurrency, convertLength } from '../../conversions'; @@ -13,7 +13,6 @@ export class ApiComponent implements OnInit, OnChanges { @Input() today: number; @Input() timeAgo: string; - @Input() value: number; greeting: string; whoIAm: string; @@ -33,7 +32,7 @@ export class ApiComponent implements OnInit, OnChanges { ngOnInit() { this.translation.onChange().subscribe({ - next: () => { + next: (locale: L10nLocale) => { this.greeting = this.translation.translate('home.greeting'); this.whoIAm = this.translation.translate('home.whoIAm', { name: 'Angular l10n' }); this.description = this.translation.translate('home.description'); @@ -41,7 +40,7 @@ export class ApiComponent implements OnInit, OnChanges { this.formattedToday = this.intl.formatDate(this.today, { dateStyle: 'full', timeStyle: 'short' }); this.formattedTimeAgo = this.intl.formatRelativeTime(this.timeAgo, 'second', { numeric: 'always', style: 'long' }); this.formattedValue = this.intl.formatNumber( - this.value, + 1000, { digits: '1.2-2', style: 'currency' }, undefined, undefined, @@ -50,13 +49,13 @@ export class ApiComponent implements OnInit, OnChanges { ); this.formattedLength = this.intl.formatNumber( 1, - { digits: '1.0-2', style: 'unit', unit: this.translation.getLocale().units['length'] }, + { digits: '1.0-2', style: 'unit', unit: locale.units['length'] }, undefined, undefined, convertLength ); - this.formattedOnePlural = this.intl.plural(1, 'home', { type: 'cardinal' }); - this.formattedOtherPlural = this.intl.plural(2, 'home', { type: 'cardinal' }); + this.formattedOnePlural = this.intl.plural(1, 'home.devs', { type: 'cardinal' }); + this.formattedOtherPlural = this.intl.plural(2, 'home.devs', { type: 'cardinal' }); } }); } diff --git a/projects/angular-l10n-app/src/app/home/directive/directive.component.html b/projects/angular-l10n-app/src/app/home/directive/directive.component.html index dce0fb7e..c1ab9778 100644 --- a/projects/angular-l10n-app/src/app/home/directive/directive.component.html +++ b/projects/angular-l10n-app/src/app/home/directive/directive.component.html @@ -7,5 +7,5 @@

Directives

{{ today }}

{{ timeAgo }}


-

{{ value }}

+

1000

1

\ No newline at end of file diff --git a/projects/angular-l10n-app/src/app/home/directive/directive.component.ts b/projects/angular-l10n-app/src/app/home/directive/directive.component.ts index 4ee8f8f0..75180df8 100644 --- a/projects/angular-l10n-app/src/app/home/directive/directive.component.ts +++ b/projects/angular-l10n-app/src/app/home/directive/directive.component.ts @@ -12,7 +12,6 @@ export class DirectiveComponent implements OnInit { @Input() today: number; @Input() timeAgo: string; - @Input() value: number; convertCurrency = convertCurrency; convertLength = convertLength; diff --git a/projects/angular-l10n-app/src/app/home/home.component.html b/projects/angular-l10n-app/src/app/home/home.component.html index a4ff0e0e..ff8172f9 100644 --- a/projects/angular-l10n-app/src/app/home/home.component.html +++ b/projects/angular-l10n-app/src/app/home/home.component.html @@ -5,12 +5,12 @@

{{ 'home.subtitle' | translate:locale.language }}

- +
- +
- +
\ No newline at end of file diff --git a/projects/angular-l10n-app/src/app/home/home.component.ts b/projects/angular-l10n-app/src/app/home/home.component.ts index 2d9852f9..18797eef 100644 --- a/projects/angular-l10n-app/src/app/home/home.component.ts +++ b/projects/angular-l10n-app/src/app/home/home.component.ts @@ -13,7 +13,6 @@ export class HomeComponent implements OnInit { today = Date.now(); timeAgo = '-0'; - value = Math.round(Math.random() * 1000000) / 100; constructor(@Inject(L10N_LOCALE) public locale: L10nLocale) { } diff --git a/projects/angular-l10n-app/src/app/home/pipe/pipe.component.html b/projects/angular-l10n-app/src/app/home/pipe/pipe.component.html index a1dbbec6..61029d7f 100644 --- a/projects/angular-l10n-app/src/app/home/pipe/pipe.component.html +++ b/projects/angular-l10n-app/src/app/home/pipe/pipe.component.html @@ -6,8 +6,8 @@

Pure Pipes

{{ today | l10nDate:locale.language:{ dateStyle: 'full', timeStyle: 'short' } }}

{{ timeAgo | l10nTimeAgo:locale.language:'second':{ numeric:'always', style:'long' } }}


-

{{ value | l10nNumber:locale.language:{ digits: '1.2-2', style: 'currency' }:locale.currency:convertCurrency:{ rate: 1.16 } }}

+

{{ 1000 | l10nNumber:locale.language:{ digits: '1.2-2', style: 'currency' }:locale.currency:convertCurrency:{ rate: 1.16 } }}

{{ 1 | l10nNumber:locale.language:{ digits: '1.0-2', style: 'unit', unit: locale.units['length'] }:undefined:convertLength }}


-

1 {{ 1 | l10nPlural:locale.language:'home':{ type: 'cardinal' } }}

-

2 {{ 2 | l10nPlural:locale.language:'home':{ type: 'cardinal' } }}

\ No newline at end of file +

1 {{ 1 | l10nPlural:locale.language:'home.devs':{ type: 'cardinal' } }}

+

2 {{ 2 | l10nPlural:locale.language:'home.devs':{ type: 'cardinal' } }}

\ No newline at end of file diff --git a/projects/angular-l10n-app/src/app/home/pipe/pipe.component.ts b/projects/angular-l10n-app/src/app/home/pipe/pipe.component.ts index 7c704948..befa4a10 100644 --- a/projects/angular-l10n-app/src/app/home/pipe/pipe.component.ts +++ b/projects/angular-l10n-app/src/app/home/pipe/pipe.component.ts @@ -13,7 +13,6 @@ export class PipeComponent implements OnInit { @Input() today: number; @Input() timeAgo: string; - @Input() value: number; convertCurrency = convertCurrency; convertLength = convertLength; diff --git a/projects/angular-l10n-app/src/assets/i18n/app-en-US.json b/projects/angular-l10n-app/src/assets/i18n/app-en-US.json index 1695e50d..296fea5d 100644 --- a/projects/angular-l10n-app/src/assets/i18n/app-en-US.json +++ b/projects/angular-l10n-app/src/assets/i18n/app-en-US.json @@ -6,8 +6,10 @@ "greeting": "Hello world!", "whoIAm": "I am {{name}}", "description": "An Angular library to translate texts, dates and numbers", - "one": "software developer", - "other": "software developers" + "devs": { + "one": "software developer", + "other": "software developers" + } }, "onPush": { "title": "OnPush Change detection strategy" diff --git a/projects/angular-l10n-app/src/assets/i18n/app-it-IT.json b/projects/angular-l10n-app/src/assets/i18n/app-it-IT.json index 91e12c54..6fc50e35 100644 --- a/projects/angular-l10n-app/src/assets/i18n/app-it-IT.json +++ b/projects/angular-l10n-app/src/assets/i18n/app-it-IT.json @@ -6,8 +6,10 @@ "greeting": "Ciao mondo!", "whoIAm": "Sono {{name}}", "description": "Una libreria Angular per tradurre testi, date e numeri", - "one": "sviluppatore software", - "other": "sviluppatori software" + "devs":{ + "one": "sviluppatore software", + "other": "sviluppatori software" + } }, "onPush": { "title": "Strategia di rilevamento del cambiamento OnPush"