fixup! feat(common): introduce KeyValuePipe

packages/common/src/pipes/keyvalue_pipe.ts

@@ -12,6 +12,10 @@ function makeKeyValuePair<K, V>(key: K, value: V): KeyValue<K, V> {
   return {key: key, value: value};
 }
 
+/**
+ * A key value pair.
+ * Usually used to represent the key value pairs from a Map or Object.
+ */
 export interface KeyValue<K, V> {
   key: K;
   value: V;
@@ -24,7 +28,7 @@ export interface KeyValue<K, V> {
  * Transforms Object or Map into an array of key value pairs.
  *
  * The output array will be ordered by keys.
- * By default the comparator will be by Unicode point value
+ * By default the comparator will be by Unicode point value.
  * You can optionally pass a compareFn if your keys are complex types.
  *
  */
@@ -97,4 +101,4 @@ export function defaultComparator<K, V>(
   const aString = String(a);
   const bString = String(b);
   return aString == bString ? 0 : aString < bString ? -1 : 1;
-}
+}

packages/common/test/pipes/keyvalue_pipe_spec.ts

@@ -137,7 +137,7 @@ describe('defaultComparator', () => {
     expect(values.sort(defaultComparator)).toEqual([{key: 1, value: 3}, {key: 2, value: 1}]);
   });
   it('should sort boolean in false (0) -> true (1)', () => {
-    const values = [{key: false, value: 1}, {key: true, value: 3}];
+    const values = [{key: true, value: 3}, {key: false, value: 1}];
     expect(values.sort(defaultComparator)).toEqual([{key: false, value: 1}, {key: true, value: 3}]);
   });
   it('should sort numbers as strings in numerical ascending', () => {

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('foo:1');
+      expect(element.all(by.css('keyvalue-pipe div')).get(1).getText()).toEqual('bar:2');
+      expect(element.all(by.css('keyvalue-pipe div')).get(2).getText()).toEqual('foo:1');
+      expect(element.all(by.css('keyvalue-pipe div')).get(3).getText()).toEqual('bar:1');
+    });
+  });
 });

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: `<div>
+    <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>
+  </div>`
+})
+export class KeyValuePipeComponent {
+  object: {[key: string]: number} = {'foo': 1, 'bar': 2};
+  map = new Map([['foo', 1], ['bar', 2]]);
+}
+// #enddocregion

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

@@ -19,6 +19,7 @@ import {DeprecatedNumberPipeComponent, NumberPipeComponent} from './number_pipe'
 import {DeprecatedPercentPipeComponent, PercentPipeComponent} from './percent_pipe';
 import {SlicePipeListComponent, SlicePipeStringComponent} from './slice_pipe';
 import {TitleCasePipeComponent} from './titlecase_pipe';
+import { KeyValuePipeComponent } from './keyvalue_pipe';
 
 @Component({
   selector: 'example-app',
@@ -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]