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/index.ts

@@ -16,4 +16,4 @@ export {NgLocalization} from './src/localization';
 export {CommonModule} from './src/common_module';
 
 export {NgClass, NgFor, NgIf, NgPlural, NgPluralCase, NgStyle, NgSwitch, NgSwitchCase, NgSwitchDefault, NgTemplateOutlet} from './src/directives/index';
-export {AsyncPipe, DatePipe, I18nPluralPipe, I18nSelectPipe, JsonPipe, LowerCasePipe, CurrencyPipe, DecimalPipe, PercentPipe, SlicePipe, UpperCasePipe} from './src/pipes/index';
+export {AsyncPipe, DatePipe, I18nPluralPipe, I18nSelectPipe, JsonPipe, KeysPipe, LowerCasePipe, CurrencyPipe, DecimalPipe, PercentPipe, SlicePipe, UpperCasePipe} from './src/pipes/index';

modules/@angular/common/src/pipes/index.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';
@@ -29,6 +30,7 @@ export {
   I18nPluralPipe,
   I18nSelectPipe,
   JsonPipe,
+  KeysPipe,
   LowerCasePipe,
   PercentPipe,
   SlicePipe,
@@ -50,4 +52,5 @@ export const COMMON_PIPES = [
   DatePipe,
   I18nPluralPipe,
   I18nSelectPipe,
+  KeysPipe,
 ];

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

@@ -0,0 +1,27 @@
+/**
+ * @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 {Pipe, PipeTransform} from '@angular/core';
+
+/**
+ * @ngModule CommonModule
+ * @whatItDoes Transforms an object to array of its keys.
+ * @howToUse `object_expression | keys`
+ * @description
+ *
+ * Transforms an object to array of its keys using `Object.keys`.
+ *
+ * ### Example
+ * {@example common/pipes/ts/keys_pipe.ts region='KeysPipe'}
+ *
+ * @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,34 @@
+/**
+ * @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 {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 pipe: KeysPipe;
+
+    beforeEach(() => { pipe = new KeysPipe(); });
+
+    describe('transform', () => {
+      it('should return keys', () => {
+        var object = {key1: 'value1', key2: 'value2'};
+        var keys = ['key1', 'key2'];
+        var val = pipe.transform(object);
+        expect(val).toEqual(keys);
+      });
+
+      it('should throw error if value is undefined',
+         () => { expect(() => pipe.transform(undefined)).toThrowError(); });
+
+      it('should throw error if value is null',
+         () => { expect(() => pipe.transform(null)).toThrowError(); });
+    });
+
+  });
+}

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

@@ -0,0 +1,23 @@
+/**
+ * @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, NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+
+// #docregion KeysPipe
+@Component({
+  selector: 'json-pipe',
+  template: `<div *ngFor="let key of object | keys">
+    key is {{key}} and value is {{myObject[key]}}
+  </div>`
+})
+export class KeysPipeComponent {
+  object: Object = {key1: 'value1', key2: 'value2'};
+}
+// #enddocregion

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);