DzmitryShylovich · Jan 17, 2017 · Jan 17, 2017 · Jan 17, 2017
diff --git a/modules/@angular/common/src/common.ts b/modules/@angular/common/src/common.ts
@@ -14,6 +14,6 @@
 export * from './location/index';
 export {NgLocaleLocalization, NgLocalization} from './localization';
 export {CommonModule} from './common_module';
-export {NgClass, NgFor, NgIf, NgPlural, NgPluralCase, NgStyle, NgSwitch, NgSwitchCase, NgSwitchDefault, NgTemplateOutlet, NgComponentOutlet} from './directives/index';
+export {NgAttr, NgClass, NgFor, NgIf, NgPlural, NgPluralCase, NgStyle, NgSwitch, NgSwitchCase, NgSwitchDefault, NgTemplateOutlet, NgComponentOutlet} from './directives/index';
 export {AsyncPipe, DatePipe, I18nPluralPipe, I18nSelectPipe, JsonPipe, LowerCasePipe, CurrencyPipe, DecimalPipe, PercentPipe, SlicePipe, UpperCasePipe, TitleCasePipe} from './pipes/index';
 export {VERSION} from './version';
diff --git a/modules/@angular/common/src/directives/index.ts b/modules/@angular/common/src/directives/index.ts
@@ -8,6 +8,7 @@
 
 import {Provider} from '@angular/core';
 
+import {NgAttr} from './ng_attr';
 import {NgClass} from './ng_class';
 import {NgComponentOutlet} from './ng_component_outlet';
 import {NgFor} from './ng_for';
@@ -18,6 +19,7 @@ import {NgSwitch, NgSwitchCase, NgSwitchDefault} from './ng_switch';
 import {NgTemplateOutlet} from './ng_template_outlet';
 
 export {
+  NgAttr,
   NgClass,
   NgComponentOutlet,
   NgFor,
@@ -28,7 +30,7 @@ export {
   NgSwitch,
   NgSwitchCase,
   NgSwitchDefault,
-  NgTemplateOutlet
+  NgTemplateOutlet,
 };
 
 
@@ -37,6 +39,7 @@ export {
  * application.
  */
 export const COMMON_DIRECTIVES: Provider[] = [
+  NgAttr,
   NgClass,
   NgComponentOutlet,
   NgFor,

diff --git a/modules/@angular/common/src/directives/ng_attr.ts b/modules/@angular/common/src/directives/ng_attr.ts
@@ -0,0 +1,63 @@
+/**
+ * @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 {Directive, DoCheck, ElementRef, Input, KeyValueChanges, KeyValueDiffer, KeyValueDiffers, Renderer} from '@angular/core';
+
+/**
+ * @ngModule CommonModule
+ *
+ * @whatItDoes Adds and removes attributes on an HTML element.
+ *
+ * @howToUse
+ * ```
+ * <some-element [ngAttr]="{id: 'someId', name: 'someName'}">...</some-element>
+ *
+ * <some-element [ngAttr]="objExp">...</some-element>
+ * ```
+ *
+ * @description
+ *
+ * The attributes are updated according to the value of the expression evaluation:
+ * - keys are attribute names
+ * - values are the values assigned to those attributes
+ *
+ * @experimental
+ */
+@Directive({selector: '[ngAttr]'})
+export class NgAttr implements DoCheck {
+  private _attrs: {[attrName: string]: string};
+  private _differ: KeyValueDiffer<string, string>;
+
+  constructor(
+      private _differs: KeyValueDiffers, private _el: ElementRef, private _renderer: Renderer) {}
+
+  @Input()
+  set ngAttr(attrs: {[attrName: string]: string}) {
+    this._attrs = attrs;
+    if (!this._differ && attrs) {
+      this._differ = this._differs.find(attrs).create(null);
+    }
+  }
+
+  ngDoCheck(): void {
+    const changes = this._differ.diff(this._attrs);
+    if (changes) {
+      this._applyChanges(changes);
+    }
+  }
+
+  private _applyChanges(changes: KeyValueChanges<string, string>): void {
+    changes.forEachRemovedItem(record => this._setAttribute(record.key, null));
+    changes.forEachAddedItem(record => this._setAttribute(record.key, record.currentValue));
+    changes.forEachChangedItem(record => this._setAttribute(record.key, record.currentValue));
+  }
+
+  private _setAttribute(attrName: string, attrValue: string): void {
+    this._renderer.setElementAttribute(this._el.nativeElement, attrName, attrValue);
+  }
+}
diff --git a/tools/public_api_guard/common/index.d.ts b/tools/public_api_guard/common/index.d.ts
@@ -107,6 +107,15 @@ export declare class LowerCasePipe implements PipeTransform {
     transform(value: string): string;
 }
 
+/** @experimental */
+export declare class NgAttr implements DoCheck {
+    ngAttr: {
+        [attrName: string]: string;
+    };
+    constructor(_differs: KeyValueDiffers, _el: ElementRef, _renderer: Renderer);
+    ngDoCheck(): void;
+}
+
 /** @stable */
 export declare class NgClass implements DoCheck {
     klass: string;