feat(common): introduce KeyValuePipe (#24319)

PR Close #24319

packages/examples/common/pipes/ts/e2e_test/pipe_spec.ts

@@ -57,4 +57,14 @@ describe('pipe', () => {
       expect(element.all(by.css('titlecase-pipe p')).get(5).getText()).toEqual('Foo-vs-bar');
     });
   });
+  describe('titlecase', () => {
+    it('should work properly', () => {
+      browser.get(URL);
+      waitForElement('keyvalue-pipe');
+      expect(element.all(by.css('keyvalue-pipe div')).get(0).getText()).toEqual('1:bar');
+      expect(element.all(by.css('keyvalue-pipe div')).get(1).getText()).toEqual('2:foo');
+      expect(element.all(by.css('keyvalue-pipe div')).get(2).getText()).toEqual('1:bar');
+      expect(element.all(by.css('keyvalue-pipe div')).get(3).getText()).toEqual('2:foo');
+    });
+  });
 });

packages/examples/common/pipes/ts/keyvalue_pipe.ts

@@ -0,0 +1,29 @@
+/**
+ * @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 {Component} from '@angular/core';
+
+// #docregion KeyValuePipe
+@Component({
+  selector: 'keyvalue-pipe',
+  template: `<span>
+    <p>Object</p>
+    <div *ngFor="let item of object | keyvalue">
+      {{item.key}}:{{item.value}}
+    </div>
+    <p>Map</p>
+    <div *ngFor="let item of map | keyvalue">
+      {{item.key}}:{{item.value}}
+    </div>
+  </span>`
+})
+export class KeyValuePipeComponent {
+  object: {[key: number]: string} = {2: 'foo', 1: 'bar'};
+  map = new Map([[2, 'foo'], [1, 'bar']]);
+}
+// #enddocregion

packages/examples/common/pipes/ts/module.ts

@@ -14,6 +14,7 @@ import {CurrencyPipeComponent, DeprecatedCurrencyPipeComponent} from './currency
 import {DatePipeComponent, DeprecatedDatePipeComponent} from './date_pipe';
 import {I18nPluralPipeComponent, I18nSelectPipeComponent} from './i18n_pipe';
 import {JsonPipeComponent} from './json_pipe';
+import {KeyValuePipeComponent} from './keyvalue_pipe';
 import {LowerUpperPipeComponent} from './lowerupper_pipe';
 import {DeprecatedNumberPipeComponent, NumberPipeComponent} from './number_pipe';
 import {DeprecatedPercentPipeComponent, PercentPipeComponent} from './percent_pipe';
@@ -31,7 +32,7 @@ import {TitleCasePipeComponent} from './titlecase_pipe';
 
     <h2><code>date</code></h2>
     <date-pipe></date-pipe>
-    
+
     <h2><code>json</code></h2>
     <json-pipe></json-pipe>
 
@@ -53,6 +54,9 @@ import {TitleCasePipeComponent} from './titlecase_pipe';
     <h2><code>i18n</code></h2>
     <i18n-plural-pipe></i18n-plural-pipe>
     <i18n-select-pipe></i18n-select-pipe>
+
+    <h2><code>keyvalue</code></h2>
+    <keyvalue-pipe></keyvalue-pipe>
   `
 })
 export class ExampleAppComponent {
@@ -64,7 +68,7 @@ export class ExampleAppComponent {
     DatePipeComponent, DeprecatedDatePipeComponent, LowerUpperPipeComponent, TitleCasePipeComponent,
     NumberPipeComponent, PercentPipeComponent, DeprecatedPercentPipeComponent,
     CurrencyPipeComponent, DeprecatedCurrencyPipeComponent, SlicePipeStringComponent,
-    SlicePipeListComponent, I18nPluralPipeComponent, I18nSelectPipeComponent
+    SlicePipeListComponent, I18nPluralPipeComponent, I18nSelectPipeComponent, KeyValuePipeComponent
   ],
   imports: [BrowserModule],
   bootstrap: [ExampleAppComponent]