Skip to content

Commit 7199a40

Browse files
json-derulojson-derulo
committed
docs: improve docs
1 parent 6d56906 commit 7199a40

File tree

7 files changed

+76
-22
lines changed

7 files changed

+76
-22
lines changed

‎README.md

Lines changed: 60 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,8 @@ export class MyModule {
4444
}
4545
```
4646

47+
Also, every pipe accepts the `locale` option.
48+
4749
Now you can use the pipes, see below.
4850

4951
## Pipes
@@ -64,8 +66,11 @@ The input date can be one of the following:
6466
* null
6567
* undefined
6668

67-
The options are a subset of the options for `new Intl.DateTimeFormat()`. For a list of the options, see
68-
their [docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options).
69+
The following options are supported:
70+
71+
* [`dateStyle`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#datestyle)
72+
* [`timeStyle`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#timestyle)
73+
* [`hour12`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#hour12)
6974

7075
With the `INTL_DATE_PIPE_DEFAULT_OPTIONS` injection token you can specify default options.
7176

@@ -84,8 +89,15 @@ The input can be one of the following:
8489
* null
8590
* undefined
8691

87-
The options are a subset of the options for `new Intl.NumberFormat()`. For a list of the options, see
88-
their [docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options).
92+
The following options are supported:
93+
94+
* [`notation`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#notation)
95+
* [`signDisplay`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#signdisplay)
96+
* [`minimumIntegerDigits`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#minimumintegerdigits)
97+
* [`minimumFractionDigits`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#minimumfractiondigits)
98+
* [`maximumFractionDigits`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#maximumfractiondigits)
99+
* [`minimumSignificantDigits`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#minimumsignificantdigits)
100+
* [`maximumSignificantDigits`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#maximumsignificantdigits)
89101

90102
With the `INTL_DECIMAL_PIPE_DEFAULT_OPTIONS` injection token you can specify default options.
91103

@@ -104,8 +116,15 @@ The input can be one of the following:
104116
* null
105117
* undefined
106118

107-
The options are a subset of the options for `new Intl.NumberFormat()`. For a list of the options, see
108-
their [docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options).
119+
The following options are supported:
120+
121+
* [`notation`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#notation)
122+
* [`signDisplay`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#signdisplay)
123+
* [`minimumIntegerDigits`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#minimumintegerdigits)
124+
* [`minimumFractionDigits`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#minimumfractiondigits)
125+
* [`maximumFractionDigits`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#maximumfractiondigits)
126+
* [`minimumSignificantDigits`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#minimumsignificantdigits)
127+
* [`maximumSignificantDigits`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#maximumsignificantdigits)
109128

110129
With the `INTL_PERCENT_PIPE_DEFAULT_OPTIONS` injection token you can specify default options.
111130

@@ -127,8 +146,17 @@ The input can be one of the following:
127146
The currency code parameter is required and must be a valid ISO 4217 currency code. If you want to transform a decimal
128147
number instead, use the `intlDecimal` pipe.
129148

130-
The options are a subset of the options for `new Intl.NumberFormat()`. For a list of the options, see
131-
their [docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options).
149+
The following additional options are supported:
150+
151+
* [`currencyDisplay`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#currencydisplay)
152+
* [`currencySign`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#currencysign)
153+
* [`notation`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#notation)
154+
* [`signDisplay`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#signdisplay)
155+
* [`minimumIntegerDigits`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#minimumintegerdigits)
156+
* [`minimumFractionDigits`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#minimumfractiondigits)
157+
* [`maximumFractionDigits`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#maximumfractiondigits)
158+
* [`minimumSignificantDigits`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#minimumsignificantdigits)
159+
* [`maximumSignificantDigits`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#maximumsignificantdigits)
132160

133161
With the `INTL_CURRENCY_PIPE_DEFAULT_OPTIONS` injection token you can specify default options.
134162

@@ -146,8 +174,9 @@ The input can be one of the following:
146174
* null
147175
* undefined
148176

149-
The options are a subset of the options for `new Intl.DisplayNames()`. For a list of the options, see
150-
their [docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames/DisplayNames#options).
177+
The following option is supported:
178+
179+
* [`languageDisplay`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames/DisplayNames#languagedisplay)
151180

152181
With the `INTL_LANGUAGE_PIPE_DEFAULT_OPTIONS` injection token you can specify default options.
153182

@@ -165,11 +194,6 @@ The input can be one of the following:
165194
* null
166195
* undefined
167196

168-
The options are a subset of the options for `new Intl.DisplayNames()`. For a list of the options, see
169-
their [docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames/DisplayNames#options).
170-
171-
With the `INTL_COUNTRY_PIPE_DEFAULT_OPTIONS` injection token you can specify default options.
172-
173197
### Unit pipe
174198

175199
Use the unit pipe like the following:
@@ -189,8 +213,16 @@ The unit parameter is required, see
189213
the [specification](https://tc39.es/proposal-unified-intl-numberformat/section6/locales-currencies-tz_proposed_out.html#sec-issanctionedsimpleunitidentifier)
190214
for a full list of possible values. If you want to transform a decimal number instead, use the `intlDecimal` pipe.
191215

192-
The options are a subset of the options for `new Intl.NumberFormat()`. For a list of the options, see
193-
their [docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options).
216+
The following additional options are supported:
217+
218+
* [`unitDisplay`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#unitdisplay)
219+
* [`notation`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#notation)
220+
* [`signDisplay`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#signdisplay)
221+
* [`minimumIntegerDigits`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#minimumintegerdigits)
222+
* [`minimumFractionDigits`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#minimumfractiondigits)
223+
* [`maximumFractionDigits`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#maximumfractiondigits)
224+
* [`minimumSignificantDigits`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#minimumsignificantdigits)
225+
* [`maximumSignificantDigits`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#maximumsignificantdigits)
194226

195227
With the `INTL_UNIT_PIPE_DEFAULT_OPTIONS` injection token you can specify default options.
196228

@@ -208,13 +240,18 @@ The input can be one of the following:
208240
* null
209241
* undefined
210242

211-
The options are a subset of the options for `new Intl.ListFormat()`. For a list of the options, see
212-
their [docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/ListFormat#options).
243+
The following options are supported:
244+
245+
* [`type`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/ListFormat#type)
246+
* [`style`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/ListFormat#style)
213247

214248
With the `INTL_LIST_PIPE_DEFAULT_OPTIONS` injection token you can specify default options.
215249

216250
## Relative Time (timeago) pipe
217251

252+
The relative time format will format the input date compared to the current date in a "timeago" format. Every minute,
253+
the value will be updated automatically.
254+
218255
Use the relative time pipe like the following:
219256

220257
```
@@ -229,8 +266,10 @@ The input date can be one of the following:
229266
* null
230267
* undefined
231268

232-
The options are a subset of the options for `new Intl.RelativeTimeFormat()`. For a list of the options, see
233-
their [docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/RelativeTimeFormat#options).
269+
The following options are supported:
270+
271+
* [`numeric`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/RelativeTimeFormat#numeric)
272+
* [`style`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/RelativeTimeFormat#style)
234273

235274
With the `INTL_RELATIVE_TIME_PIPE_DEFAULT_OPTIONS` injection token you can specify default options.
236275

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,11 @@
22
<span>Angular Intl</span>
33
<button mat-button routerLink="/">Getting started</button>
44
<button mat-button routerLink="/pipes">Pipes</button>
5+
<span class="spacer"></span>
6+
<a href="https://github.com/json-derulo/angular-ecmascript-intl" mat-button target="_blank">
7+
<img alt="GitHub logo" class="logo" matButtonIcon src="assets/github-mark-white.png"/>
8+
GitHub
9+
</a>
510
</mat-toolbar>
611

712
<router-outlet/>

‎projects/angular-intl-demo/src/app/app.component.scss

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,12 @@
11
mat-toolbar button {
22
margin-left: 8px;
33
}
4+
5+
.spacer {
6+
flex: 1 1 auto;
7+
}
8+
9+
.logo {
10+
height: 24px;
11+
margin-right: 8px;
12+
}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,5 +12,6 @@ export class DateComponent {
1212
dateStyle: Intl.DateTimeFormatOptions['dateStyle'];
1313
timeStyle: Intl.DateTimeFormatOptions['timeStyle'];
1414
hour12: Intl.DateTimeFormatOptions['hour12'];
15+
dayPeriod: Intl.DateTimeFormatOptions['dayPeriod'];
1516
locale?: string;
1617
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {languages} from "../../languages";
88
styleUrls: ['./relative-time.component.scss'],
99
})
1010
export class RelativeTimeComponent {
11-
selectedDate = new Date();
11+
selectedDate = new Date(new Date().getTime() - 60000);
1212
languages = languages;
1313
numeric?: IntlRelativeTimePipeOptions['numeric'];
1414
style?: IntlRelativeTimePipeOptions['style'];

‎projects/angular-intl-demo/src/assets/.gitkeep

Whitespace-only changes.

‎projects/angular-intl-demo/src/assets/github-mark-white.png

4.72 KB
Loading

0 commit comments

Comments
 (0)