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