docs(common): add new examples for date/number pipes (#18935)

PR Close #18935

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

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':
  *
- * ```
+ * {@example common/pipes/ts/date_pipe.ts region='DeprecatedDatePipe'}
- *     {{ 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'}
  *
  * @stable
  */

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
  */

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
  */

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: `<div>
+    <!--output '$0.259'-->
+    <p>A: {{a | currency}}</p>
+
+    <!--output 'CA$0.26'-->
+    <p>A: {{a | currency:'CAD'}}</p>
+
+    <!--output 'CAD0.26'-->
+    <p>A: {{a | currency:'CAD':'code'}}</p>
+
+    <!--output 'CA$0,001.35'-->
+    <p>B: {{b | currency:'CAD':'symbol':'4.2-2'}}</p>
+
+    <!--output '$0,001.35'-->
+    <p>B: {{b | currency:'CAD':'symbol-narrow':'4.2-2'}}</p>
+
+    <!--output '0 001,35 CA$'-->
+    <p>B: {{b | currency:'CAD':'symbol':'4.2-2':'fr'}}</p>
+  </div>`
+})
+export class CurrencyPipeComponent {
+  a: number = 0.259;
+  b: number = 1.3495;
+}
+// #enddocregion
+
+// #docregion DeprecatedCurrencyPipe
+@Component({
+  selector: 'deprecated-currency-pipe',
+  template: `<div>
+    <!--output 'CAD0.26'-->
+    <p>A: {{a | currency:'CAD'}}</p>
+
+    <!--output '$0,001.35'-->
+    <p>B: {{b | currency:'CAD':true:'4.2-2'}}</p>
+  </div>`
+})
+export class DeprecatedCurrencyPipeComponent {
+  a: number = 0.259;
+  b: number = 1.3495;
+}
+// #enddocregion

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: `<div>
+    <!--output 'Jun 15, 2015'-->
     <p>Today is {{today | date}}</p>
+
+    <!--output 'Monday, June 15, 2015'-->
     <p>Or if you prefer, {{today | date:'fullDate'}}</p>
+
+    <!--output '9:43 AM'-->
     <p>The time is {{today | date:'shortTime'}}</p>
-    <p>The custom date is {{today | date:'yyyy-mm-dd HH:mm'}}</p>
+
+    <!--output 'Monday, June 15, 2015 at 9:03:01 AM GMT+01:00' -->
+    <p>The full date/time is {{today | date:'full'}}</p>
+
+    <!--output 'Lundi 15 Juin 2015 à 09:03:01 GMT+01:00'-->
+    <p>The full date/time in french is: {{today | date:'full':'':'fr'}}</p>
+
+    <!--output '2015-06-15 05:03 PM GMT+9'-->
+    <p>The custom date is {{today | date:'yyyy-mm-dd HH:mm a z':'+0900'}}</p>
+
+    <!--output '2015-06-15 09:03 AM GMT+9'-->
+    <p>The custom date with fixed timezone is {{fixedTimezone | date:'yyyy-mm-dd HH:mm a z':'+0900'}}</p>
   </div>`
 })
 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: `<div>
+    <!--output 'Sep 3, 2010'-->
+    <p>Today is {{today | date}}</p>
+
+    <!--output 'Friday, September 3, 2010'-->
+    <p>Or if you prefer, {{today | date:'fullDate'}}</p>
+
+    <!--output '12:05 PM'-->
+    <p>The time is {{today | date:'shortTime'}}</p>
+
+    <!--output '2010-09-03 12:05 PM'-->
+    <p>The custom date is {{today | date:'yyyy-mm-dd HH:mm a'}}</p>
+  </div>`
+})
+export class DeprecatedDatePipeComponent {
+  today = Date.now();
 }
 // #enddocregion

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;
+                                                                  }
+];

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,
+    DatePipeComponent, DeprecatedDatePipeComponent, LowerUpperPipeComponent, NumberPipeComponent,
-    CurrencyPipeComponent, SlicePipeStringComponent, SlicePipeListComponent,
+    PercentPipeComponent, DeprecatedPercentPipeComponent, CurrencyPipeComponent,
+    DeprecatedCurrencyPipeComponent, SlicePipeStringComponent, SlicePipeListComponent,
     I18nPluralPipeComponent, I18nSelectPipeComponent
   ],
   imports: [BrowserModule],

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: `<div>
+    <!--output '2.718'-->
+    <p>e (no formatting): {{e | number}}</p>
+    
+    <!--output '002.71828'-->
+    <p>e (3.1-5): {{e | number:'3.1-5'}}</p>
+
+    <!--output '0,002.71828'-->
+    <p>e (3.5-5): {{e | number:'4.5-5'}}</p>
+    
+    <!--output '0 002,71828'-->
+    <p>e (french): {{e | number:'4.5-5':'fr'}}</p>
+
+    <!--output '3.14'-->
+    <p>pi (no formatting): {{e | number}}</p>
+    
+    <!--output '003.14'-->
+    <p>pi (3.1-5): {{e | number:'3.1-5'}}</p>
+
+    <!--output '003.14000'-->
+    <p>pi (3.5-5): {{e | number:'3.5-5'}}</p>
+  </div>`
+})
+export class NumberPipeComponent {
+  pi: number = 3.14;
+  e: number = 2.718281828459045;
+}
+// #enddocregion
+
+// #docregion DeprecatedNumberPipe
+@Component({
+  selector: 'deprecated-number-pipe',
   template: `<div>
     <p>e (no formatting): {{e}}</p>
     <p>e (3.1-5): {{e | number:'3.1-5'}}</p>
@@ -18,37 +56,8 @@ import {Component} from '@angular/core';
     <p>pi (3.5-5): {{pi | number:'3.5-5'}}</p>
   </div>`
 })
-export class NumberPipeComponent {
+export class DeprecatedNumberPipeComponent {
   pi: number = 3.141592;
   e: number = 2.718281828459045;
 }
 // #enddocregion
-
-// #docregion PercentPipe
-@Component({
-  selector: 'percent-pipe',
-  template: `<div>
-    <p>A: {{a | percent}}</p>
-    <p>B: {{b | percent:'4.3-5'}}</p>
-  </div>`
-})
-export class PercentPipeComponent {
-  a: number = 0.259;
-  b: number = 1.3495;
-}
-// #enddocregion
-
-// #docregion CurrencyPipe
-@Component({
-  selector: 'currency-pipe',
-  template: `<div>
-    <p>A: {{a | currency:'CAD'}}</p>
-    <p>B: {{b | currency:'CAD':'symbol':'4.2-2'}}</p>
-    <p>B: {{b | currency:'CAD':'symbol-narrow':'4.2-2'}}</p>
-  </div>`
-})
-export class CurrencyPipeComponent {
-  a: number = 0.259;
-  b: number = 1.3495;
-}
-// #enddocregion

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: `<div>
+    <!--output '26%'-->
+    <p>A: {{a | percent}}</p>
+
+    <!--output '0,134.950%'-->
+    <p>B: {{b | percent:'4.3-5'}}</p>
+
+    <!--output '0 134,950 %'-->
+    <p>B: {{b | percent:'4.3-5':'fr'}}</p>
+  </div>`
+})
+export class PercentPipeComponent {
+  a: number = 0.259;
+  b: number = 1.3495;
+}
+// #enddocregion
+
+// #docregion DeprecatedPercentPipe
+@Component({
+  selector: 'deprecated-percent-pipe',
+  template: `<div>
+    <!--output '25.9%'-->
+    <p>A: {{a | percent}}</p>
+
+    <!--output '0,134.95%'-->
+    <p>B: {{b | percent:'4.3-5'}}</p>
+  </div>`
+})
+export class DeprecatedPercentPipeComponent {
+  a: number = 0.259;
+  b: number = 1.3495;
+}
+// #enddocregion