feat(common): new pipe to support object for ngFor

Add keys_pipe which uses Object.keys in order to transform
an object to array of its keys.

Fix angular#2246

modules/@angular/common/src/pipes.ts

@@ -17,6 +17,7 @@ export {DatePipe} from './pipes/date_pipe';
 export {I18nPluralPipe} from './pipes/i18n_plural_pipe';
 export {I18nSelectPipe} from './pipes/i18n_select_pipe';
 export {JsonPipe} from './pipes/json_pipe';
+export {KeysPipe} from './pipes/keys_pipe'
 export {LowerCasePipe} from './pipes/lowercase_pipe';
 export {CurrencyPipe, DecimalPipe, PercentPipe} from './pipes/number_pipe';
 export {SlicePipe} from './pipes/slice_pipe';

modules/@angular/common/src/pipes/common_pipes.ts

@@ -16,6 +16,7 @@ import {DatePipe} from './date_pipe';
 import {I18nPluralPipe} from './i18n_plural_pipe';
 import {I18nSelectPipe} from './i18n_select_pipe';
 import {JsonPipe} from './json_pipe';
+import {KeysPipe} from './keys_pipe';
 import {LowerCasePipe} from './lowercase_pipe';
 import {CurrencyPipe, DecimalPipe, PercentPipe} from './number_pipe';
 import {SlicePipe} from './slice_pipe';
@@ -43,4 +44,5 @@ export const COMMON_PIPES = [
   DatePipe,
   I18nPluralPipe,
   I18nSelectPipe,
+  KeysPipe,
 ];

modules/@angular/common/src/pipes/keys_pipe.ts

@@ -0,0 +1,18 @@
+import {Pipe, PipeTransform} from '@angular/core';
+
+/**
+ * Transforms a map/object to array of keys/properties
+ * using `Object.keys`
+ *
+ * ### Usage
+ *
+ *  <div *ngFor="let key of myObject | keys">
+ *    key is {{key}} and value is {{myObject[key]}}
+ *  </div>
+ *
+ * @experimental
+ */
+@Pipe({name: 'keys', pure: false})
+export class KeysPipe implements PipeTransform {
+  transform(value: Object): Array<string> { return Object.keys(value); }
+}

modules/@angular/common/test/pipes/keys_pipe_spec.ts

@@ -0,0 +1,25 @@
+import {KeysPipe} from '@angular/common';
+import {afterEach, beforeEach, ddescribe, describe, expect, iit, it, xit} from '@angular/core/testing/testing_internal';
+
+export function main() {
+  describe('KeysPipe', () => {
+    var object: Object;
+    var keys: Array<string>;
+    var pipe: KeysPipe;
+
+    beforeEach(() => {
+      object = { key1: 'value1', key2: 'value2' };
+      keys = ['key1', 'key2'];
+      pipe = new KeysPipe();
+    });
+
+    describe('transform', () => {
+      it('should return keys', () => {
+        var val = pipe.transform(object);
+        expect(val).toEqual(keys);
+      });
+
+    });
+
+  });
+}

tools/public_api_guard/common/index.d.ts

@@ -63,6 +63,11 @@ export declare class JsonPipe implements PipeTransform {
     transform(value: any): string;
 }
 
+/** @experimental */
+export declare class KeysPipe implements PipeTransform {
+    transform(value: Object): Array<string>;
+}
+
 /** @stable */
 export declare class Location {
     constructor(platformStrategy: LocationStrategy);