Skip to content

Commit 34f2027

Browse files
json-derulojson-derulo
committed
docs: refactor demo to signals
1 parent 9bdb7cb commit 34f2027

21 files changed

+231
-205
lines changed

‎projects/angular-intl-demo/src/app/app.config.ts

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import { provideHttpClient } from '@angular/common/http';
22
import { ApplicationConfig } from '@angular/core';
3-
import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
3+
import {
4+
MAT_FORM_FIELD_DEFAULT_OPTIONS,
5+
MatFormFieldDefaultOptions,
6+
} from '@angular/material/form-field';
47
import { provideAnimations } from '@angular/platform-browser/animations';
58
import { provideRouter, withHashLocation } from '@angular/router';
69
import { provideMarkdown } from 'ngx-markdown';
@@ -13,7 +16,7 @@ export const appConfig: ApplicationConfig = {
1316
provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
1417
useValue: {
1518
subscriptSizing: 'dynamic',
16-
},
19+
} satisfies MatFormFieldDefaultOptions,
1720
},
1821
provideAnimations(),
1922
provideHttpClient(),

‎projects/angular-intl-demo/src/app/getting-started/getting-started.component.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { Component } from '@angular/core';
2-
import { MarkdownModule } from 'ngx-markdown';
2+
import { MarkdownComponent } from 'ngx-markdown';
33

44
@Component({
55
selector: 'app-getting-started',
66
templateUrl: './getting-started.component.html',
77
styleUrls: ['./getting-started.component.scss'],
8-
imports: [MarkdownModule],
8+
imports: [MarkdownComponent],
99
})
1010
export class GettingStartedComponent {}

‎projects/angular-intl-demo/src/app/pipes/country/country.component.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<mat-form-field>
33
<mat-label>Country to transform</mat-label>
44
<mat-select [(ngModel)]="selectedCountry">
5-
@for (country of countries; track country) {
5+
@for (country of countries; track $index) {
66
<mat-option [value]="country">{{ country }}</mat-option>
77
}
88
</mat-select>
@@ -12,11 +12,11 @@
1212
<mat-label>Locale</mat-label>
1313
<mat-select [(ngModel)]="locale">
1414
<mat-option [value]="undefined">Browser default</mat-option>
15-
@for (language of languages; track language) {
15+
@for (language of languages; track $index) {
1616
<mat-option [value]="language">{{ language }}</mat-option>
1717
}
1818
</mat-select>
1919
</mat-form-field>
2020
</div>
2121

22-
<p>{{ selectedCountry | intlCountry: { locale } }}</p>
22+
<p>{{ selectedCountry() | intlCountry: options() }}</p>

‎projects/angular-intl-demo/src/app/pipes/country/country.component.ts

+8-4
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
1-
import { Component } from '@angular/core';
1+
import { Component, computed, signal } from '@angular/core';
22
import { FormsModule } from '@angular/forms';
33
import { MatOptionModule } from '@angular/material/core';
44
import { MatFormFieldModule } from '@angular/material/form-field';
55
import { MatSelectModule } from '@angular/material/select';
6-
import { IntlCountryPipe } from '../../../../../angular-ecmascript-intl/src/lib/country/intl-country.pipe';
6+
import {
7+
IntlCountryPipe,
8+
IntlCountryPipeOptions,
9+
} from 'angular-ecmascript-intl';
710
import { languages } from '../../languages';
811
import { countries } from './countries';
912

@@ -22,6 +25,7 @@ import { countries } from './countries';
2225
export class CountryComponent {
2326
languages = languages;
2427
countries = countries;
25-
selectedCountry = 'DE';
26-
locale?: string;
28+
selectedCountry = signal('DE');
29+
locale = signal<string | undefined>(undefined);
30+
options = computed<IntlCountryPipeOptions>(() => ({ locale: this.locale() }));
2731
}

‎projects/angular-intl-demo/src/app/pipes/currency/currency.component.html

+3-19
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<mat-form-field>
88
<mat-label>Currency</mat-label>
99
<mat-select [(ngModel)]="currency">
10-
@for (currency of currencies; track currency) {
10+
@for (currency of currencies; track $index) {
1111
<mat-option [value]="currency">{{ currency }}</mat-option>
1212
}
1313
</mat-select>
@@ -17,7 +17,7 @@
1717
<mat-label>Locale</mat-label>
1818
<mat-select [(ngModel)]="locale">
1919
<mat-option [value]="undefined">Browser default</mat-option>
20-
@for (language of languages; track language) {
20+
@for (language of languages; track $index) {
2121
<mat-option [value]="language">{{ language }}</mat-option>
2222
}
2323
</mat-select>
@@ -128,21 +128,5 @@
128128
</div>
129129

130130
<p>
131-
{{
132-
enteredNumber
133-
| intlCurrency
134-
: currency
135-
: {
136-
locale,
137-
currencyDisplay,
138-
currencySign,
139-
notation,
140-
signDisplay,
141-
minimumIntegerDigits: minimumIntegerDigits ?? undefined,
142-
minimumFractionDigits: minimumFractionDigits ?? undefined,
143-
maximumFractionDigits: maximumFractionDigits ?? undefined,
144-
minimumSignificantDigits: minimumSignificantDigits ?? undefined,
145-
maximumSignificantDigits: maximumSignificantDigits ?? undefined,
146-
}
147-
}}
131+
{{ enteredNumber() | intlCurrency: currency() : options() }}
148132
</p>

‎projects/angular-intl-demo/src/app/pipes/currency/currency.component.ts

+40-24
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
1-
import { Component } from '@angular/core';
1+
import { Component, computed, signal } from '@angular/core';
22
import { FormsModule } from '@angular/forms';
33
import { MatOptionModule } from '@angular/material/core';
44
import { MatFormFieldModule } from '@angular/material/form-field';
55
import { MatInputModule } from '@angular/material/input';
66
import { MatSelectModule } from '@angular/material/select';
7-
import { IntlCurrencyPipe } from '../../../../../angular-ecmascript-intl/src/lib/currency/intl-currency.pipe';
7+
import {
8+
IntlCurrencyPipe,
9+
IntlCurrencyPipeOptions,
10+
} from 'angular-ecmascript-intl';
811
import { languages } from '../../languages';
912
import { currencies } from './currencies';
1013

@@ -22,28 +25,41 @@ import { currencies } from './currencies';
2225
],
2326
})
2427
export class CurrencyComponent {
25-
enteredNumber = '0.24';
26-
currency = 'USD';
28+
enteredNumber = signal('0.24');
29+
currency = signal('USD');
2730
languages = languages;
2831
currencies = currencies;
29-
locale?: string;
30-
notation?: Intl.NumberFormatOptions['notation'];
31-
signDisplay?: Intl.NumberFormatOptions['signDisplay'];
32-
currencyDisplay?: Intl.NumberFormatOptions['currencyDisplay'];
33-
currencySign?: Intl.NumberFormatOptions['currencySign'];
34-
minimumIntegerDigits?:
35-
| Intl.NumberFormatOptions['minimumIntegerDigits']
36-
| null;
37-
minimumFractionDigits?:
38-
| Intl.NumberFormatOptions['minimumFractionDigits']
39-
| null;
40-
maximumFractionDigits?:
41-
| Intl.NumberFormatOptions['maximumFractionDigits']
42-
| null;
43-
minimumSignificantDigits?:
44-
| Intl.NumberFormatOptions['minimumSignificantDigits']
45-
| null;
46-
maximumSignificantDigits?:
47-
| Intl.NumberFormatOptions['maximumSignificantDigits']
48-
| null;
32+
locale = signal<string | undefined>(undefined);
33+
notation = signal<IntlCurrencyPipeOptions['notation']>(undefined);
34+
signDisplay = signal<IntlCurrencyPipeOptions['signDisplay']>(undefined);
35+
currencyDisplay =
36+
signal<IntlCurrencyPipeOptions['currencyDisplay']>(undefined);
37+
currencySign = signal<IntlCurrencyPipeOptions['currencySign']>(undefined);
38+
minimumIntegerDigits = signal<
39+
IntlCurrencyPipeOptions['minimumIntegerDigits'] | null
40+
>(undefined);
41+
minimumFractionDigits = signal<
42+
IntlCurrencyPipeOptions['minimumFractionDigits'] | null
43+
>(undefined);
44+
maximumFractionDigits = signal<
45+
IntlCurrencyPipeOptions['maximumFractionDigits'] | null
46+
>(undefined);
47+
minimumSignificantDigits = signal<
48+
IntlCurrencyPipeOptions['minimumSignificantDigits'] | null
49+
>(undefined);
50+
maximumSignificantDigits = signal<
51+
IntlCurrencyPipeOptions['maximumSignificantDigits'] | null
52+
>(undefined);
53+
options = computed<IntlCurrencyPipeOptions>(() => ({
54+
locale: this.locale(),
55+
currencyDisplay: this.currencyDisplay(),
56+
currencySign: this.currencySign(),
57+
notation: this.notation(),
58+
signDisplay: this.signDisplay(),
59+
minimumIntegerDigits: this.minimumIntegerDigits() ?? undefined,
60+
minimumFractionDigits: this.minimumFractionDigits() ?? undefined,
61+
maximumFractionDigits: this.maximumFractionDigits() ?? undefined,
62+
minimumSignificantDigits: this.minimumSignificantDigits() ?? undefined,
63+
maximumSignificantDigits: this.maximumSignificantDigits() ?? undefined,
64+
}));
4965
}

‎projects/angular-intl-demo/src/app/pipes/date/date.component.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
<mat-label>Locale</mat-label>
1818
<mat-select [(ngModel)]="locale">
1919
<mat-option [value]="undefined">Browser default</mat-option>
20-
@for (language of languages; track language) {
20+
@for (language of languages; track $index) {
2121
<mat-option [value]="language">{{ language }}</mat-option>
2222
}
2323
</mat-select>
@@ -55,4 +55,4 @@
5555
</mat-form-field>
5656
</div>
5757

58-
<p>{{ selectedDate | intlDate: { dateStyle, timeStyle, hour12, locale } }}</p>
58+
<p>{{ selectedDate() | intlDate: options() }}</p>

‎projects/angular-intl-demo/src/app/pipes/date/date.component.ts

+13-8
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
import { Component } from '@angular/core';
1+
import { Component, computed, signal } from '@angular/core';
22
import { FormsModule } from '@angular/forms';
33
import { MatButtonModule } from '@angular/material/button';
44
import { MatOptionModule } from '@angular/material/core';
55
import { MatFormFieldModule } from '@angular/material/form-field';
66
import { MatIconModule } from '@angular/material/icon';
77
import { MatInputModule } from '@angular/material/input';
88
import { MatSelectModule } from '@angular/material/select';
9-
import { IntlDatePipe } from '../../../../../angular-ecmascript-intl/src/lib/date/intl-date.pipe';
9+
import { IntlDatePipe, IntlDatePipeOptions } from 'angular-ecmascript-intl';
1010
import { languages } from '../../languages';
1111
import { getDateString } from '../date-utils';
1212

@@ -27,10 +27,15 @@ import { getDateString } from '../date-utils';
2727
})
2828
export class DateComponent {
2929
languages = languages;
30-
selectedDate = getDateString();
31-
dateStyle: Intl.DateTimeFormatOptions['dateStyle'];
32-
timeStyle: Intl.DateTimeFormatOptions['timeStyle'];
33-
hour12: Intl.DateTimeFormatOptions['hour12'];
34-
dayPeriod: Intl.DateTimeFormatOptions['dayPeriod'];
35-
locale?: string;
30+
selectedDate = signal(getDateString());
31+
dateStyle = signal<IntlDatePipeOptions['dateStyle']>(undefined);
32+
timeStyle = signal<IntlDatePipeOptions['timeStyle']>(undefined);
33+
hour12 = signal<IntlDatePipeOptions['hour12']>(undefined);
34+
locale = signal<string | undefined>(undefined);
35+
options = computed<IntlDatePipeOptions>(() => ({
36+
locale: this.locale(),
37+
dateStyle: this.dateStyle(),
38+
timeStyle: this.timeStyle(),
39+
hour12: this.hour12(),
40+
}));
3641
}

‎projects/angular-intl-demo/src/app/pipes/decimal/decimal.component.html

+2-15
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<mat-label>Locale</mat-label>
99
<mat-select [(ngModel)]="locale">
1010
<mat-option [value]="undefined">Browser default</mat-option>
11-
@for (language of languages; track language) {
11+
@for (language of languages; track $index) {
1212
<mat-option [value]="language">{{ language }}</mat-option>
1313
}
1414
</mat-select>
@@ -99,18 +99,5 @@
9999
</div>
100100

101101
<p>
102-
{{
103-
enteredNumber
104-
| intlDecimal
105-
: {
106-
locale,
107-
notation,
108-
signDisplay,
109-
minimumIntegerDigits: minimumIntegerDigits ?? undefined,
110-
minimumFractionDigits: minimumFractionDigits ?? undefined,
111-
maximumFractionDigits: maximumFractionDigits ?? undefined,
112-
minimumSignificantDigits: minimumSignificantDigits ?? undefined,
113-
maximumSignificantDigits: maximumSignificantDigits ?? undefined,
114-
}
115-
}}
102+
{{ enteredNumber() | intlDecimal: options() }}
116103
</p>

‎projects/angular-intl-demo/src/app/pipes/decimal/decimal.component.ts

+34-21
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
1-
import { Component } from '@angular/core';
1+
import { Component, computed, signal } from '@angular/core';
22
import { FormsModule } from '@angular/forms';
33
import { MatOptionModule } from '@angular/material/core';
44
import { MatFormFieldModule } from '@angular/material/form-field';
55
import { MatInputModule } from '@angular/material/input';
66
import { MatSelectModule } from '@angular/material/select';
7-
import { IntlDecimalPipe } from '../../../../../angular-ecmascript-intl/src/lib/decimal/intl-decimal.pipe';
7+
import {
8+
IntlDecimalPipe,
9+
IntlDecimalPipeOptions,
10+
} from 'angular-ecmascript-intl';
811
import { languages } from '../../languages';
912

1013
@Component({
@@ -21,24 +24,34 @@ import { languages } from '../../languages';
2124
],
2225
})
2326
export class DecimalComponent {
24-
enteredNumber = '1024.4539';
27+
enteredNumber = signal('1024.4539');
2528
languages = languages;
26-
locale?: string;
27-
notation?: Intl.NumberFormatOptions['notation'];
28-
signDisplay?: Intl.NumberFormatOptions['signDisplay'];
29-
minimumIntegerDigits?:
30-
| Intl.NumberFormatOptions['minimumIntegerDigits']
31-
| null;
32-
minimumFractionDigits?:
33-
| Intl.NumberFormatOptions['minimumFractionDigits']
34-
| null;
35-
maximumFractionDigits?:
36-
| Intl.NumberFormatOptions['maximumFractionDigits']
37-
| null;
38-
minimumSignificantDigits?:
39-
| Intl.NumberFormatOptions['minimumSignificantDigits']
40-
| null;
41-
maximumSignificantDigits?:
42-
| Intl.NumberFormatOptions['maximumSignificantDigits']
43-
| null;
29+
locale = signal<string | undefined>(undefined);
30+
notation = signal<IntlDecimalPipeOptions['notation']>(undefined);
31+
signDisplay = signal<IntlDecimalPipeOptions['signDisplay']>(undefined);
32+
minimumIntegerDigits = signal<
33+
IntlDecimalPipeOptions['minimumIntegerDigits'] | null
34+
>(undefined);
35+
minimumFractionDigits = signal<
36+
IntlDecimalPipeOptions['minimumFractionDigits'] | null
37+
>(undefined);
38+
maximumFractionDigits = signal<
39+
IntlDecimalPipeOptions['maximumFractionDigits'] | null
40+
>(undefined);
41+
minimumSignificantDigits = signal<
42+
IntlDecimalPipeOptions['minimumSignificantDigits'] | null
43+
>(undefined);
44+
maximumSignificantDigits = signal<
45+
IntlDecimalPipeOptions['maximumSignificantDigits'] | null
46+
>(undefined);
47+
options = computed<IntlDecimalPipeOptions>(() => ({
48+
locale: this.locale(),
49+
notation: this.notation(),
50+
signDisplay: this.signDisplay(),
51+
minimumIntegerDigits: this.minimumIntegerDigits() ?? undefined,
52+
minimumFractionDigits: this.minimumFractionDigits() ?? undefined,
53+
maximumFractionDigits: this.maximumFractionDigits() ?? undefined,
54+
minimumSignificantDigits: this.minimumSignificantDigits() ?? undefined,
55+
maximumSignificantDigits: this.maximumSignificantDigits() ?? undefined,
56+
}));
4457
}

‎projects/angular-intl-demo/src/app/pipes/language/language.component.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<mat-form-field>
33
<mat-label>Language to transform</mat-label>
44
<mat-select [(ngModel)]="selectedLanguage">
5-
@for (language of languages; track language) {
5+
@for (language of languages; track $index) {
66
<mat-option [value]="language">{{ language }}</mat-option>
77
}
88
</mat-select>
@@ -12,7 +12,7 @@
1212
<mat-label>Locale</mat-label>
1313
<mat-select [(ngModel)]="locale">
1414
<mat-option [value]="undefined">Browser default</mat-option>
15-
@for (language of languages; track language) {
15+
@for (language of languages; track $index) {
1616
<mat-option [value]="language">{{ language }}</mat-option>
1717
}
1818
</mat-select>
@@ -28,4 +28,4 @@
2828
</mat-form-field>
2929
</div>
3030

31-
<p>{{ selectedLanguage | intlLanguage: { languageDisplay, locale } }}</p>
31+
<p>{{ selectedLanguage() | intlLanguage: options() }}</p>

0 commit comments

Comments
 (0)