json-derulo · json-derulo · Dec 7, 2024 · Dec 7, 2024
diff --git a/projects/angular-intl-demo/src/app/app.config.ts b/projects/angular-intl-demo/src/app/app.config.ts
@@ -1,6 +1,9 @@
 import { provideHttpClient } from '@angular/common/http';
 import { ApplicationConfig } from '@angular/core';
-import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
+import {
+  MAT_FORM_FIELD_DEFAULT_OPTIONS,
+  MatFormFieldDefaultOptions,
+} from '@angular/material/form-field';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { provideRouter, withHashLocation } from '@angular/router';
 import { provideMarkdown } from 'ngx-markdown';
@@ -13,7 +16,7 @@ export const appConfig: ApplicationConfig = {
       provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
       useValue: {
         subscriptSizing: 'dynamic',
-      },
+      } satisfies MatFormFieldDefaultOptions,
     },
     provideAnimations(),
     provideHttpClient(),

diff --git a/projects/angular-intl-demo/src/app/getting-started/getting-started.component.ts b/projects/angular-intl-demo/src/app/getting-started/getting-started.component.ts
@@ -1,10 +1,10 @@
 import { Component } from '@angular/core';
-import { MarkdownModule } from 'ngx-markdown';
+import { MarkdownComponent } from 'ngx-markdown';
 
 @Component({
   selector: 'app-getting-started',
   templateUrl: './getting-started.component.html',
   styleUrls: ['./getting-started.component.scss'],
-  imports: [MarkdownModule],
+  imports: [MarkdownComponent],
 })
 export class GettingStartedComponent {}
diff --git a/projects/angular-intl-demo/src/app/pipes/country/country.component.html b/projects/angular-intl-demo/src/app/pipes/country/country.component.html
@@ -2,7 +2,7 @@
   <mat-form-field>
     <mat-label>Country to transform</mat-label>
     <mat-select [(ngModel)]="selectedCountry">
-      @for (country of countries; track country) {
+      @for (country of countries; track $index) {
         <mat-option [value]="country">{{ country }}</mat-option>
       }
     </mat-select>
@@ -12,11 +12,11 @@
     <mat-label>Locale</mat-label>
     <mat-select [(ngModel)]="locale">
       <mat-option [value]="undefined">Browser default</mat-option>
-      @for (language of languages; track language) {
+      @for (language of languages; track $index) {
         <mat-option [value]="language">{{ language }}</mat-option>
       }
     </mat-select>
   </mat-form-field>
 </div>
 
-<p>{{ selectedCountry | intlCountry: { locale } }}</p>
+<p>{{ selectedCountry() | intlCountry: options() }}</p>
diff --git a/projects/angular-intl-demo/src/app/pipes/country/country.component.ts b/projects/angular-intl-demo/src/app/pipes/country/country.component.ts
@@ -1,9 +1,12 @@
-import { Component } from '@angular/core';
+import { Component, computed, signal } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatOptionModule } from '@angular/material/core';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatSelectModule } from '@angular/material/select';
-import { IntlCountryPipe } from '../../../../../angular-ecmascript-intl/src/lib/country/intl-country.pipe';
+import {
+  IntlCountryPipe,
+  IntlCountryPipeOptions,
+} from 'angular-ecmascript-intl';
 import { languages } from '../../languages';
 import { countries } from './countries';
 
@@ -22,6 +25,7 @@ import { countries } from './countries';
 export class CountryComponent {
   languages = languages;
   countries = countries;
-  selectedCountry = 'DE';
-  locale?: string;
+  selectedCountry = signal('DE');
+  locale = signal<string | undefined>(undefined);
+  options = computed<IntlCountryPipeOptions>(() => ({ locale: this.locale() }));
 }
diff --git a/projects/angular-intl-demo/src/app/pipes/currency/currency.component.html b/projects/angular-intl-demo/src/app/pipes/currency/currency.component.html
@@ -7,7 +7,7 @@
   <mat-form-field>
     <mat-label>Currency</mat-label>
     <mat-select [(ngModel)]="currency">
-      @for (currency of currencies; track currency) {
+      @for (currency of currencies; track $index) {
         <mat-option [value]="currency">{{ currency }}</mat-option>
       }
     </mat-select>
@@ -17,7 +17,7 @@
     <mat-label>Locale</mat-label>
     <mat-select [(ngModel)]="locale">
       <mat-option [value]="undefined">Browser default</mat-option>
-      @for (language of languages; track language) {
+      @for (language of languages; track $index) {
         <mat-option [value]="language">{{ language }}</mat-option>
       }
     </mat-select>
@@ -128,21 +128,5 @@
 </div>
 
 <p>
-  {{
-    enteredNumber
-      | intlCurrency
-        : currency
-        : {
-            locale,
-            currencyDisplay,
-            currencySign,
-            notation,
-            signDisplay,
-            minimumIntegerDigits: minimumIntegerDigits ?? undefined,
-            minimumFractionDigits: minimumFractionDigits ?? undefined,
-            maximumFractionDigits: maximumFractionDigits ?? undefined,
-            minimumSignificantDigits: minimumSignificantDigits ?? undefined,
-            maximumSignificantDigits: maximumSignificantDigits ?? undefined,
-          }
-  }}
+  {{ enteredNumber() | intlCurrency: currency() : options() }}
 </p>
diff --git a/projects/angular-intl-demo/src/app/pipes/currency/currency.component.ts b/projects/angular-intl-demo/src/app/pipes/currency/currency.component.ts
@@ -1,10 +1,13 @@
-import { Component } from '@angular/core';
+import { Component, computed, signal } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatOptionModule } from '@angular/material/core';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
-import { IntlCurrencyPipe } from '../../../../../angular-ecmascript-intl/src/lib/currency/intl-currency.pipe';
+import {
+  IntlCurrencyPipe,
+  IntlCurrencyPipeOptions,
+} from 'angular-ecmascript-intl';
 import { languages } from '../../languages';
 import { currencies } from './currencies';
 
@@ -22,28 +25,41 @@ import { currencies } from './currencies';
   ],
 })
 export class CurrencyComponent {
-  enteredNumber = '0.24';
-  currency = 'USD';
+  enteredNumber = signal('0.24');
+  currency = signal('USD');
   languages = languages;
   currencies = currencies;
-  locale?: string;
-  notation?: Intl.NumberFormatOptions['notation'];
-  signDisplay?: Intl.NumberFormatOptions['signDisplay'];
-  currencyDisplay?: Intl.NumberFormatOptions['currencyDisplay'];
-  currencySign?: Intl.NumberFormatOptions['currencySign'];
-  minimumIntegerDigits?:
-    | Intl.NumberFormatOptions['minimumIntegerDigits']
-    | null;
-  minimumFractionDigits?:
-    | Intl.NumberFormatOptions['minimumFractionDigits']
-    | null;
-  maximumFractionDigits?:
-    | Intl.NumberFormatOptions['maximumFractionDigits']
-    | null;
-  minimumSignificantDigits?:
-    | Intl.NumberFormatOptions['minimumSignificantDigits']
-    | null;
-  maximumSignificantDigits?:
-    | Intl.NumberFormatOptions['maximumSignificantDigits']
-    | null;
+  locale = signal<string | undefined>(undefined);
+  notation = signal<IntlCurrencyPipeOptions['notation']>(undefined);
+  signDisplay = signal<IntlCurrencyPipeOptions['signDisplay']>(undefined);
+  currencyDisplay =
+    signal<IntlCurrencyPipeOptions['currencyDisplay']>(undefined);
+  currencySign = signal<IntlCurrencyPipeOptions['currencySign']>(undefined);
+  minimumIntegerDigits = signal<
+    IntlCurrencyPipeOptions['minimumIntegerDigits'] | null
+  >(undefined);
+  minimumFractionDigits = signal<
+    IntlCurrencyPipeOptions['minimumFractionDigits'] | null
+  >(undefined);
+  maximumFractionDigits = signal<
+    IntlCurrencyPipeOptions['maximumFractionDigits'] | null
+  >(undefined);
+  minimumSignificantDigits = signal<
+    IntlCurrencyPipeOptions['minimumSignificantDigits'] | null
+  >(undefined);
+  maximumSignificantDigits = signal<
+    IntlCurrencyPipeOptions['maximumSignificantDigits'] | null
+  >(undefined);
+  options = computed<IntlCurrencyPipeOptions>(() => ({
+    locale: this.locale(),
+    currencyDisplay: this.currencyDisplay(),
+    currencySign: this.currencySign(),
+    notation: this.notation(),
+    signDisplay: this.signDisplay(),
+    minimumIntegerDigits: this.minimumIntegerDigits() ?? undefined,
+    minimumFractionDigits: this.minimumFractionDigits() ?? undefined,
+    maximumFractionDigits: this.maximumFractionDigits() ?? undefined,
+    minimumSignificantDigits: this.minimumSignificantDigits() ?? undefined,
+    maximumSignificantDigits: this.maximumSignificantDigits() ?? undefined,
+  }));
 }
diff --git a/projects/angular-intl-demo/src/app/pipes/date/date.component.html b/projects/angular-intl-demo/src/app/pipes/date/date.component.html
@@ -17,7 +17,7 @@
     <mat-label>Locale</mat-label>
     <mat-select [(ngModel)]="locale">
       <mat-option [value]="undefined">Browser default</mat-option>
-      @for (language of languages; track language) {
+      @for (language of languages; track $index) {
         <mat-option [value]="language">{{ language }}</mat-option>
       }
     </mat-select>
@@ -55,4 +55,4 @@
   </mat-form-field>
 </div>
 
-<p>{{ selectedDate | intlDate: { dateStyle, timeStyle, hour12, locale } }}</p>
+<p>{{ selectedDate() | intlDate: options() }}</p>
diff --git a/projects/angular-intl-demo/src/app/pipes/date/date.component.ts b/projects/angular-intl-demo/src/app/pipes/date/date.component.ts
@@ -1,12 +1,12 @@
-import { Component } from '@angular/core';
+import { Component, computed, signal } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatOptionModule } from '@angular/material/core';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
-import { IntlDatePipe } from '../../../../../angular-ecmascript-intl/src/lib/date/intl-date.pipe';
+import { IntlDatePipe, IntlDatePipeOptions } from 'angular-ecmascript-intl';
 import { languages } from '../../languages';
 import { getDateString } from '../date-utils';
 
@@ -27,10 +27,15 @@ import { getDateString } from '../date-utils';
 })
 export class DateComponent {
   languages = languages;
-  selectedDate = getDateString();
-  dateStyle: Intl.DateTimeFormatOptions['dateStyle'];
-  timeStyle: Intl.DateTimeFormatOptions['timeStyle'];
-  hour12: Intl.DateTimeFormatOptions['hour12'];
-  dayPeriod: Intl.DateTimeFormatOptions['dayPeriod'];
-  locale?: string;
+  selectedDate = signal(getDateString());
+  dateStyle = signal<IntlDatePipeOptions['dateStyle']>(undefined);
+  timeStyle = signal<IntlDatePipeOptions['timeStyle']>(undefined);
+  hour12 = signal<IntlDatePipeOptions['hour12']>(undefined);
+  locale = signal<string | undefined>(undefined);
+  options = computed<IntlDatePipeOptions>(() => ({
+    locale: this.locale(),
+    dateStyle: this.dateStyle(),
+    timeStyle: this.timeStyle(),
+    hour12: this.hour12(),
+  }));
 }
diff --git a/projects/angular-intl-demo/src/app/pipes/decimal/decimal.component.html b/projects/angular-intl-demo/src/app/pipes/decimal/decimal.component.html
@@ -8,7 +8,7 @@
     <mat-label>Locale</mat-label>
     <mat-select [(ngModel)]="locale">
       <mat-option [value]="undefined">Browser default</mat-option>
-      @for (language of languages; track language) {
+      @for (language of languages; track $index) {
         <mat-option [value]="language">{{ language }}</mat-option>
       }
     </mat-select>
@@ -99,18 +99,5 @@
 </div>
 
 <p>
-  {{
-    enteredNumber
-      | intlDecimal
-        : {
-            locale,
-            notation,
-            signDisplay,
-            minimumIntegerDigits: minimumIntegerDigits ?? undefined,
-            minimumFractionDigits: minimumFractionDigits ?? undefined,
-            maximumFractionDigits: maximumFractionDigits ?? undefined,
-            minimumSignificantDigits: minimumSignificantDigits ?? undefined,
-            maximumSignificantDigits: maximumSignificantDigits ?? undefined,
-          }
-  }}
+  {{ enteredNumber() | intlDecimal: options() }}
 </p>
diff --git a/projects/angular-intl-demo/src/app/pipes/decimal/decimal.component.ts b/projects/angular-intl-demo/src/app/pipes/decimal/decimal.component.ts
@@ -1,10 +1,13 @@
-import { Component } from '@angular/core';
+import { Component, computed, signal } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatOptionModule } from '@angular/material/core';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
-import { IntlDecimalPipe } from '../../../../../angular-ecmascript-intl/src/lib/decimal/intl-decimal.pipe';
+import {
+  IntlDecimalPipe,
+  IntlDecimalPipeOptions,
+} from 'angular-ecmascript-intl';
 import { languages } from '../../languages';
 
 @Component({
@@ -21,24 +24,34 @@ import { languages } from '../../languages';
   ],
 })
 export class DecimalComponent {
-  enteredNumber = '1024.4539';
+  enteredNumber = signal('1024.4539');
   languages = languages;
-  locale?: string;
-  notation?: Intl.NumberFormatOptions['notation'];
-  signDisplay?: Intl.NumberFormatOptions['signDisplay'];
-  minimumIntegerDigits?:
-    | Intl.NumberFormatOptions['minimumIntegerDigits']
-    | null;
-  minimumFractionDigits?:
-    | Intl.NumberFormatOptions['minimumFractionDigits']
-    | null;
-  maximumFractionDigits?:
-    | Intl.NumberFormatOptions['maximumFractionDigits']
-    | null;
-  minimumSignificantDigits?:
-    | Intl.NumberFormatOptions['minimumSignificantDigits']
-    | null;
-  maximumSignificantDigits?:
-    | Intl.NumberFormatOptions['maximumSignificantDigits']
-    | null;
+  locale = signal<string | undefined>(undefined);
+  notation = signal<IntlDecimalPipeOptions['notation']>(undefined);
+  signDisplay = signal<IntlDecimalPipeOptions['signDisplay']>(undefined);
+  minimumIntegerDigits = signal<
+    IntlDecimalPipeOptions['minimumIntegerDigits'] | null
+  >(undefined);
+  minimumFractionDigits = signal<
+    IntlDecimalPipeOptions['minimumFractionDigits'] | null
+  >(undefined);
+  maximumFractionDigits = signal<
+    IntlDecimalPipeOptions['maximumFractionDigits'] | null
+  >(undefined);
+  minimumSignificantDigits = signal<
+    IntlDecimalPipeOptions['minimumSignificantDigits'] | null
+  >(undefined);
+  maximumSignificantDigits = signal<
+    IntlDecimalPipeOptions['maximumSignificantDigits'] | null
+  >(undefined);
+  options = computed<IntlDecimalPipeOptions>(() => ({
+    locale: this.locale(),
+    notation: this.notation(),
+    signDisplay: this.signDisplay(),
+    minimumIntegerDigits: this.minimumIntegerDigits() ?? undefined,
+    minimumFractionDigits: this.minimumFractionDigits() ?? undefined,
+    maximumFractionDigits: this.maximumFractionDigits() ?? undefined,
+    minimumSignificantDigits: this.minimumSignificantDigits() ?? undefined,
+    maximumSignificantDigits: this.maximumSignificantDigits() ?? undefined,
+  }));
 }
diff --git a/projects/angular-intl-demo/src/app/pipes/language/language.component.html b/projects/angular-intl-demo/src/app/pipes/language/language.component.html
@@ -2,7 +2,7 @@
   <mat-form-field>
     <mat-label>Language to transform</mat-label>
     <mat-select [(ngModel)]="selectedLanguage">
-      @for (language of languages; track language) {
+      @for (language of languages; track $index) {
         <mat-option [value]="language">{{ language }}</mat-option>
       }
     </mat-select>
@@ -12,7 +12,7 @@
     <mat-label>Locale</mat-label>
     <mat-select [(ngModel)]="locale">
       <mat-option [value]="undefined">Browser default</mat-option>
-      @for (language of languages; track language) {
+      @for (language of languages; track $index) {
         <mat-option [value]="language">{{ language }}</mat-option>
       }
     </mat-select>
@@ -28,4 +28,4 @@
   </mat-form-field>
 </div>
 
-<p>{{ selectedLanguage | intlLanguage: { languageDisplay, locale } }}</p>
+<p>{{ selectedLanguage() | intlLanguage: options() }}</p>