Update apps

robisim74 · Nov 11, 2021 · 239834d · 239834d
1 parent b625cf6
commit 239834d
Show file tree

Hide file tree

Showing 22 changed files with 114 additions and 41 deletions.
diff --git 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 @@
 
 <h3>{{ 'changeLocale' | translate:locale.language }}</h3>
 
-<button *ngFor="let item of schema" (click)="setLocale(item.locale)">{{ item.text }}</button>
+<button *ngFor="let item of schema"
+    (click)="setLocale(item.locale)">{{ item.locale.language | l10nDisplayNames:locale.language:{ type: 'language' } }}</button>
+
+<!-- <button *ngFor="let item of schema" (click)="setLocale(item.locale)">{{ item.text }}</button> -->
 
 <router-outlet></router-outlet>
diff --git a/projects/angular-l10n-app-ssr/src/app/conversions.ts 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;
+    }
+};
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
@@ -6,4 +6,8 @@ <h3>APIs</h3>
 <p>{{ formattedToday }}</p>
 <p>{{ formattedTimeAgo }}</p>
 <br>
-<p>{{ formattedValue }}</p>
+<p>{{ formattedValue }}</p>
+<p>{{ formattedLength }}</p>
+<br>
+<p>1 {{ formattedOnePlural }}</p>
+<p>2 {{ formattedOtherPlural }}</p>
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
@@ -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
@@ -7,4 +7,5 @@ <h3>Directives</h3>
 <p [options]="{ dateStyle: 'full', timeStyle: 'short' }" l10nDate>{{ today }}</p>
 <p [options]="{ numeric:'always', style:'long' }" unit="second" l10nTimeAgo>{{ timeAgo }}</p>
 <br>
-<p [options]="{ digits: '1.2-2', style: 'currency' }" l10nNumber>{{ value }}</p>
+<p [options]="{ digits: '1.2-2', style: 'currency' }" [convert]="convertCurrency" [convertParams]="{ rate: 1.16 }" l10nNumber>1000</p>
+<p [options]="{ digits: '1.0-2', style: 'unit', unit: locale.units['length'] }" [convert]="convertLength" l10nNumber>1</p>
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
@@ -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
@@ -5,12 +5,12 @@ <h2>{{ 'home.subtitle' | translate:locale.language }}</h2>
 
 <div class="box">
     <div>
-        <app-pipe [today]="today" [timeAgo]="timeAgo" [value]="value"></app-pipe>
+        <app-pipe [today]="today" [timeAgo]="timeAgo"></app-pipe>
     </div>
     <div>
-        <app-directive [today]="today" [timeAgo]="timeAgo" [value]="value"></app-directive>
+        <app-directive [today]="today" [timeAgo]="timeAgo"></app-directive>
     </div>
     <div>
-        <app-api [today]="today" [timeAgo]="timeAgo" [value]="value"></app-api>
+        <app-api [today]="today" [timeAgo]="timeAgo"></app-api>
     </div>
 </div>
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
@@ -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
@@ -6,4 +6,8 @@ <h3>Pure Pipes</h3>
 <p>{{ today | l10nDate:locale.language:{ dateStyle: 'full', timeStyle: 'short' } }}</p>
 <p>{{ timeAgo | l10nTimeAgo:locale.language:'second':{ numeric:'always', style:'long' } }}</p>
 <br>
-<p>{{ value | l10nNumber:locale.language:{ digits: '1.2-2', style: 'currency' } }}</p>
+<p>{{ 1000 | l10nNumber:locale.language:{ digits: '1.2-2', style: 'currency' }:locale.currency:convertCurrency:{ rate: 1.16 } }}</p>
+<p>{{ 1 | l10nNumber:locale.language:{ digits: '1.0-2', style: 'unit', unit: locale.units['length'] }:undefined:convertLength }}</p>
+<br>
+<p>1 {{ 1 | l10nPlural:locale.language:'home.devs':{ type: 'cardinal' } }}</p>
+<p>2 {{ 2 | l10nPlural:locale.language:'home.devs':{ type: 'cardinal' } }}</p>
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
@@ -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
@@ -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
@@ -5,7 +5,11 @@
         "subtitle": "The world is small",
         "greeting": "Hello world!",
         "whoIAm": "I am {{name}}",
-        "description": "<em>An Angular library to translate texts, dates and numbers</em>"
+        "description": "<em>An Angular library to translate texts, dates and numbers</em>",
+        "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
@@ -5,7 +5,11 @@
         "subtitle": "Il mondo è piccolo",
         "greeting": "Ciao mondo!",
         "whoIAm": "Sono {{name}}",
-        "description": "<em>Una libreria Angular per tradurre testi, date e numeri</em>"
+        "description": "<em>Una libreria Angular per tradurre testi, date e numeri</em>",
+        "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
@@ -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,15 +32,15 @@ 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');
 
                 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
@@ -7,5 +7,5 @@ <h3>Directives</h3>
 <p [options]="{ dateStyle: 'full', timeStyle: 'short' }" l10nDate>{{ today }}</p>
 <p [options]="{ numeric:'always', style:'long' }" unit="second" l10nTimeAgo>{{ timeAgo }}</p>
 <br>
-<p [options]="{ digits: '1.2-2', style: 'currency' }" [convert]="convertCurrency" [convertParams]="{ rate: 1.16 }" l10nNumber>{{ value }}</p>
+<p [options]="{ digits: '1.2-2', style: 'currency' }" [convert]="convertCurrency" [convertParams]="{ rate: 1.16 }" l10nNumber>1000</p>
 <p [options]="{ digits: '1.0-2', style: 'unit', unit: locale.units['length'] }" [convert]="convertLength" l10nNumber>1</p>
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
@@ -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
@@ -5,12 +5,12 @@ <h2>{{ 'home.subtitle' | translate:locale.language }}</h2>
 
 <div class="box">
     <div>
-        <app-pipe [today]="today" [timeAgo]="timeAgo" [value]="value"></app-pipe>
+        <app-pipe [today]="today" [timeAgo]="timeAgo"></app-pipe>
     </div>
     <div>
-        <app-directive [today]="today" [timeAgo]="timeAgo" [value]="value"></app-directive>
+        <app-directive [today]="today" [timeAgo]="timeAgo"></app-directive>
     </div>
     <div>
-        <app-api [today]="today" [timeAgo]="timeAgo" [value]="value"></app-api>
+        <app-api [today]="today" [timeAgo]="timeAgo"></app-api>
     </div>
 </div>
diff --git 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
@@ -6,8 +6,8 @@ <h3>Pure Pipes</h3>
 <p>{{ today | l10nDate:locale.language:{ dateStyle: 'full', timeStyle: 'short' } }}</p>
 <p>{{ timeAgo | l10nTimeAgo:locale.language:'second':{ numeric:'always', style:'long' } }}</p>
 <br>
-<p>{{ value | l10nNumber:locale.language:{ digits: '1.2-2', style: 'currency' }:locale.currency:convertCurrency:{ rate: 1.16 } }}</p>
+<p>{{ 1000 | l10nNumber:locale.language:{ digits: '1.2-2', style: 'currency' }:locale.currency:convertCurrency:{ rate: 1.16 } }}</p>
 <p>{{ 1 | l10nNumber:locale.language:{ digits: '1.0-2', style: 'unit', unit: locale.units['length'] }:undefined:convertLength }}</p>
 <br>
-<p>1 {{ 1 | l10nPlural:locale.language:'home':{ type: 'cardinal' } }}</p>
-<p>2 {{ 2 | l10nPlural:locale.language:'home':{ type: 'cardinal' } }}</p>
+<p>1 {{ 1 | l10nPlural:locale.language:'home.devs':{ type: 'cardinal' } }}</p>
+<p>2 {{ 2 | l10nPlural:locale.language:'home.devs':{ type: 'cardinal' } }}</p>
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
@@ -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
@@ -6,8 +6,10 @@
         "greeting": "Hello world!",
         "whoIAm": "I am {{name}}",
         "description": "<em>An Angular library to translate texts, dates and numbers</em>",
-        "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
@@ -6,8 +6,10 @@
         "greeting": "Ciao mondo!",
         "whoIAm": "Sono {{name}}",
         "description": "<em>Una libreria Angular per tradurre testi, date e numeri</em>",
-        "one": "sviluppatore software",
-        "other": "sviluppatori software"
+        "devs":{
+            "one": "sviluppatore software",
+            "other": "sviluppatori software"
+        }
     },
     "onPush": {
         "title": "Strategia di rilevamento del cambiamento OnPush"