diff --git a/packages/common/src/pipes/date_pipe.ts b/packages/common/src/pipes/date_pipe.ts index 2129c06d08..644488d5ec 100644 --- a/packages/common/src/pipes/date_pipe.ts +++ b/packages/common/src/pipes/date_pipe.ts @@ -125,13 +125,6 @@ export const ISO8601_DATE_REGEX = * Assuming `dateObj` is (year: 2015, month: 6, day: 15, hour: 21, minute: 43, second: 11) * in the _local_ time and locale is 'en-US': * - * ``` - * {{ dateObj | date }} // output is 'Jun 15, 2015' - * {{ dateObj | date:'medium' }} // output is 'Jun 15, 2015, 9:43:11 PM' - * {{ dateObj | date:'shortTime' }} // output is '9:43 PM' - * {{ dateObj | date:'hh:mm:ss a' }} // output is '09:43:11 PM' - * ``` - * * {@example common/pipes/ts/date_pipe.ts region='DatePipe'} * * @stable diff --git a/packages/common/src/pipes/deprecated/date_pipe.ts b/packages/common/src/pipes/deprecated/date_pipe.ts index 2b500897ca..0ff452e679 100644 --- a/packages/common/src/pipes/deprecated/date_pipe.ts +++ b/packages/common/src/pipes/deprecated/date_pipe.ts @@ -66,17 +66,10 @@ import {DateFormatter} from './intl'; * * ### Examples * - * Assuming `dateObj` is (year: 2015, month: 6, day: 15, hour: 21, minute: 43, second: 11) + * Assuming `dateObj` is (year: 2010, month: 9, day: 3, hour: 12 PM, minute: 05, second: 08) * in the _local_ time and locale is 'en-US': * - * ``` - * {{ dateObj | date }} // output is 'Jun 15, 2015' - * {{ dateObj | date:'medium' }} // output is 'Jun 15, 2015, 9:43:11 PM' - * {{ dateObj | date:'shortTime' }} // output is '9:43 PM' - * {{ dateObj | date:'mmss' }} // output is '43:11' - * ``` - * - * {@example common/pipes/ts/date_pipe.ts region='DatePipe'} + * {@example common/pipes/ts/date_pipe.ts region='DeprecatedDatePipe'} * * @stable */ diff --git a/packages/common/src/pipes/deprecated/number_pipe.ts b/packages/common/src/pipes/deprecated/number_pipe.ts index c2b2aa62a8..492501bd38 100644 --- a/packages/common/src/pipes/deprecated/number_pipe.ts +++ b/packages/common/src/pipes/deprecated/number_pipe.ts @@ -82,7 +82,7 @@ function formatNumber( * * ### Example * - * {@example common/pipes/ts/number_pipe.ts region='NumberPipe'} + * {@example common/pipes/ts/number_pipe.ts region='DeprecatedNumberPipe'} * * @stable */ @@ -112,7 +112,7 @@ export class DeprecatedDecimalPipe implements PipeTransform { * * ### Example * - * {@example common/pipes/ts/number_pipe.ts region='PercentPipe'} + * {@example common/pipes/ts/percent_pipe.ts region='DeprecatedPercentPipe'} * * @stable */ @@ -146,7 +146,7 @@ export class DeprecatedPercentPipe implements PipeTransform { * * ### Example * - * {@example common/pipes/ts/number_pipe.ts region='CurrencyPipe'} + * {@example common/pipes/ts/currency_pipe.ts region='DeprecatedCurrencyPipe'} * * @stable */ diff --git a/packages/common/src/pipes/number_pipe.ts b/packages/common/src/pipes/number_pipe.ts index 82e1663dbb..4f1a364b38 100644 --- a/packages/common/src/pipes/number_pipe.ts +++ b/packages/common/src/pipes/number_pipe.ts @@ -71,7 +71,7 @@ export class DecimalPipe implements PipeTransform { * * ### Example * - * {@example common/pipes/ts/number_pipe.ts region='PercentPipe'} + * {@example common/pipes/ts/percent_pipe.ts region='PercentPipe'} * * @stable */ @@ -117,7 +117,7 @@ export class PercentPipe implements PipeTransform { * * ### Example * - * {@example common/pipes/ts/number_pipe.ts region='CurrencyPipe'} + * {@example common/pipes/ts/currency_pipe.ts region='CurrencyPipe'} * * @stable */ diff --git a/packages/examples/common/pipes/ts/currency_pipe.ts b/packages/examples/common/pipes/ts/currency_pipe.ts new file mode 100644 index 0000000000..23a700dbff --- /dev/null +++ b/packages/examples/common/pipes/ts/currency_pipe.ts @@ -0,0 +1,61 @@ +/** + * @license + * Copyright Google Inc. All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://angular.io/license + */ + +import {registerLocaleData} from '@angular/common'; +import {Component} from '@angular/core'; +// we need to import data for the french locale +import localeFr from './locale-fr'; + +// registering french data +registerLocaleData(localeFr); + +// #docregion CurrencyPipe +@Component({ + selector: 'currency-pipe', + template: `
+ +

A: {{a | currency}}

+ + +

A: {{a | currency:'CAD'}}

+ + +

A: {{a | currency:'CAD':'code'}}

+ + +

B: {{b | currency:'CAD':'symbol':'4.2-2'}}

+ + +

B: {{b | currency:'CAD':'symbol-narrow':'4.2-2'}}

+ + +

B: {{b | currency:'CAD':'symbol':'4.2-2':'fr'}}

+
` +}) +export class CurrencyPipeComponent { + a: number = 0.259; + b: number = 1.3495; +} +// #enddocregion + +// #docregion DeprecatedCurrencyPipe +@Component({ + selector: 'deprecated-currency-pipe', + template: `
+ +

A: {{a | currency:'CAD'}}

+ + +

B: {{b | currency:'CAD':true:'4.2-2'}}

+
` +}) +export class DeprecatedCurrencyPipeComponent { + a: number = 0.259; + b: number = 1.3495; +} +// #enddocregion diff --git a/packages/examples/common/pipes/ts/date_pipe.ts b/packages/examples/common/pipes/ts/date_pipe.ts index d88b6da9a1..7e4c34e8ee 100644 --- a/packages/examples/common/pipes/ts/date_pipe.ts +++ b/packages/examples/common/pipes/ts/date_pipe.ts @@ -6,19 +6,64 @@ * found in the LICENSE file at https://angular.io/license */ +import {registerLocaleData} from '@angular/common'; import {Component} from '@angular/core'; +// we need to import data for the french locale +import localeFr from './locale-fr'; + +// registering french data +registerLocaleData(localeFr); // #docregion DatePipe @Component({ selector: 'date-pipe', template: `
+

Today is {{today | date}}

+ +

Or if you prefer, {{today | date:'fullDate'}}

+ +

The time is {{today | date:'shortTime'}}

-

The custom date is {{today | date:'yyyy-mm-dd HH:mm'}}

+ + +

The full date/time is {{today | date:'full'}}

+ + +

The full date/time in french is: {{today | date:'full':'':'fr'}}

+ + +

The custom date is {{today | date:'yyyy-mm-dd HH:mm a z':'+0900'}}

+ + +

The custom date with fixed timezone is {{fixedTimezone | date:'yyyy-mm-dd HH:mm a z':'+0900'}}

` }) export class DatePipeComponent { - today: number = Date.now(); + today = Date.now(); + fixedTimezone = '2015-06-15T09:03:01+0900'; +} +// #enddocregion + +// #docregion DeprecatedDatePipe +@Component({ + selector: 'deprecated-date-pipe', + template: `
+ +

Today is {{today | date}}

+ + +

Or if you prefer, {{today | date:'fullDate'}}

+ + +

The time is {{today | date:'shortTime'}}

+ + +

The custom date is {{today | date:'yyyy-mm-dd HH:mm a'}}

+
` +}) +export class DeprecatedDatePipeComponent { + today = Date.now(); } // #enddocregion diff --git a/packages/examples/common/pipes/ts/locale-fr.ts b/packages/examples/common/pipes/ts/locale-fr.ts new file mode 100644 index 0000000000..d5fa4e9d30 --- /dev/null +++ b/packages/examples/common/pipes/ts/locale-fr.ts @@ -0,0 +1,52 @@ +/** + * @license + * Copyright Google Inc. All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://angular.io/license + */ + +// THIS CODE IS GENERATED - DO NOT MODIFY +// See angular/tools/gulp-tasks/cldr/extract.js + +export default [ + 'fr', + [ + ['AM', 'PM'], + , + ], + , + [ + ['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'], + ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'], + ['di', 'lu', 'ma', 'me', 'je', 've', 'sa'] + ], + , + [ + ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'], + [ + 'janv.', 'févr.', 'mars', 'avr.', 'mai', 'juin', 'juil.', 'août', 'sept.', 'oct.', 'nov.', + 'déc.' + ], + [ + 'janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre', + 'octobre', 'novembre', 'décembre' + ] + ], + , [['av. J.-C.', 'ap. J.-C.'], , ['avant Jésus-Christ', 'après Jésus-Christ']], 1, [6, 0], + ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'], + ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], + [ + '{1} {0}', + '{1} \'à\' {0}', + , + ], + [',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'], + ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], '€', 'euro', function(n: number): + number { + let i = Math.floor(Math.abs(n)); + if (i === 0 || i === 1) + return 1; + return 5; + } +]; diff --git a/packages/examples/common/pipes/ts/module.ts b/packages/examples/common/pipes/ts/module.ts index 00597d68e8..57f2370571 100644 --- a/packages/examples/common/pipes/ts/module.ts +++ b/packages/examples/common/pipes/ts/module.ts @@ -10,11 +10,13 @@ import {Component, NgModule} from '@angular/core'; import {BrowserModule} from '@angular/platform-browser'; import {AsyncObservablePipeComponent, AsyncPromisePipeComponent} from './async_pipe'; -import {DatePipeComponent} from './date_pipe'; +import {CurrencyPipeComponent, DeprecatedCurrencyPipeComponent} from './currency_pipe'; +import {DatePipeComponent, DeprecatedDatePipeComponent} from './date_pipe'; import {I18nPluralPipeComponent, I18nSelectPipeComponent} from './i18n_pipe'; import {JsonPipeComponent} from './json_pipe'; import {LowerUpperPipeComponent} from './lowerupper_pipe'; -import {CurrencyPipeComponent, NumberPipeComponent, PercentPipeComponent} from './number_pipe'; +import {DeprecatedNumberPipeComponent, NumberPipeComponent} from './number_pipe'; +import {DeprecatedPercentPipeComponent, PercentPipeComponent} from './percent_pipe'; import {SlicePipeListComponent, SlicePipeStringComponent} from './slice_pipe'; @Component({ @@ -55,8 +57,9 @@ export class ExampleAppComponent { @NgModule({ declarations: [ AsyncPromisePipeComponent, AsyncObservablePipeComponent, ExampleAppComponent, JsonPipeComponent, - DatePipeComponent, LowerUpperPipeComponent, NumberPipeComponent, PercentPipeComponent, - CurrencyPipeComponent, SlicePipeStringComponent, SlicePipeListComponent, + DatePipeComponent, DeprecatedDatePipeComponent, LowerUpperPipeComponent, NumberPipeComponent, + PercentPipeComponent, DeprecatedPercentPipeComponent, CurrencyPipeComponent, + DeprecatedCurrencyPipeComponent, SlicePipeStringComponent, SlicePipeListComponent, I18nPluralPipeComponent, I18nSelectPipeComponent ], imports: [BrowserModule], diff --git a/packages/examples/common/pipes/ts/number_pipe.ts b/packages/examples/common/pipes/ts/number_pipe.ts index 96056b9ffd..eed7fbea2a 100644 --- a/packages/examples/common/pipes/ts/number_pipe.ts +++ b/packages/examples/common/pipes/ts/number_pipe.ts @@ -6,11 +6,49 @@ * found in the LICENSE file at https://angular.io/license */ +import {registerLocaleData} from '@angular/common'; import {Component} from '@angular/core'; +// we need to import data for the french locale +import localeFr from './locale-fr'; + +// registering french data +registerLocaleData(localeFr); // #docregion NumberPipe @Component({ selector: 'number-pipe', + template: `
+ +

e (no formatting): {{e | number}}

+ + +

e (3.1-5): {{e | number:'3.1-5'}}

+ + +

e (3.5-5): {{e | number:'4.5-5'}}

+ + +

e (french): {{e | number:'4.5-5':'fr'}}

+ + +

pi (no formatting): {{e | number}}

+ + +

pi (3.1-5): {{e | number:'3.1-5'}}

+ + +

pi (3.5-5): {{e | number:'3.5-5'}}

+
` +}) +export class NumberPipeComponent { + pi: number = 3.14; + e: number = 2.718281828459045; +} +// #enddocregion + +// #docregion DeprecatedNumberPipe +@Component({ + selector: 'deprecated-number-pipe', template: `

e (no formatting): {{e}}

e (3.1-5): {{e | number:'3.1-5'}}

@@ -18,37 +56,8 @@ import {Component} from '@angular/core';

pi (3.5-5): {{pi | number:'3.5-5'}}

` }) -export class NumberPipeComponent { +export class DeprecatedNumberPipeComponent { pi: number = 3.141592; e: number = 2.718281828459045; } // #enddocregion - -// #docregion PercentPipe -@Component({ - selector: 'percent-pipe', - template: `
-

A: {{a | percent}}

-

B: {{b | percent:'4.3-5'}}

-
` -}) -export class PercentPipeComponent { - a: number = 0.259; - b: number = 1.3495; -} -// #enddocregion - -// #docregion CurrencyPipe -@Component({ - selector: 'currency-pipe', - template: `
-

A: {{a | currency:'CAD'}}

-

B: {{b | currency:'CAD':'symbol':'4.2-2'}}

-

B: {{b | currency:'CAD':'symbol-narrow':'4.2-2'}}

-
` -}) -export class CurrencyPipeComponent { - a: number = 0.259; - b: number = 1.3495; -} -// #enddocregion diff --git a/packages/examples/common/pipes/ts/percent_pipe.ts b/packages/examples/common/pipes/ts/percent_pipe.ts new file mode 100644 index 0000000000..665500aafe --- /dev/null +++ b/packages/examples/common/pipes/ts/percent_pipe.ts @@ -0,0 +1,52 @@ +/** + * @license + * Copyright Google Inc. All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://angular.io/license + */ + +import {registerLocaleData} from '@angular/common'; +import {Component} from '@angular/core'; +// we need to import data for the french locale +import localeFr from './locale-fr'; + +// registering french data +registerLocaleData(localeFr); + +// #docregion PercentPipe +@Component({ + selector: 'percent-pipe', + template: `
+ +

A: {{a | percent}}

+ + +

B: {{b | percent:'4.3-5'}}

+ + +

B: {{b | percent:'4.3-5':'fr'}}

+
` +}) +export class PercentPipeComponent { + a: number = 0.259; + b: number = 1.3495; +} +// #enddocregion + +// #docregion DeprecatedPercentPipe +@Component({ + selector: 'deprecated-percent-pipe', + template: `
+ +

A: {{a | percent}}

+ + +

B: {{b | percent:'4.3-5'}}

+
` +}) +export class DeprecatedPercentPipeComponent { + a: number = 0.259; + b: number = 1.3495; +} +// #enddocregion