diff --git a/modules/benchmarks/src/styling/BUILD.bazel b/modules/benchmarks/src/styling/BUILD.bazel
new file mode 100644
index 0000000000..ffd0fb0cdc
--- /dev/null
+++ b/modules/benchmarks/src/styling/BUILD.bazel
@@ -0,0 +1 @@
+package(default_visibility = ["//visibility:public"])
diff --git a/modules/benchmarks/src/styling/ng2/BUILD.bazel b/modules/benchmarks/src/styling/ng2/BUILD.bazel
new file mode 100644
index 0000000000..1161e99eaf
--- /dev/null
+++ b/modules/benchmarks/src/styling/ng2/BUILD.bazel
@@ -0,0 +1,32 @@
+load("//tools:defaults.bzl", "ng_module", "ng_rollup_bundle", "ts_devserver")
+
+package(default_visibility = ["//modules/benchmarks:__subpackages__"])
+
+ng_module(
+ name = "ng2",
+ srcs = glob(["*.ts"]),
+ generate_ve_shims = True,
+ tsconfig = "//modules/benchmarks:tsconfig-build.json",
+ deps = [
+ "//modules/benchmarks/src:util_lib",
+ "//packages/core",
+ "//packages/platform-browser",
+ ],
+)
+
+ng_rollup_bundle(
+ name = "bundle",
+ entry_point = ":index_aot.ts",
+ deps = [
+ ":ng2",
+ "@npm//rxjs",
+ ],
+)
+
+ts_devserver(
+ name = "prodserver",
+ bootstrap = ["//packages/zone.js/dist:zone.js"],
+ port = 4200,
+ static_files = ["index.html"],
+ deps = [":bundle.min_debug.es2015.js"],
+)
diff --git a/modules/benchmarks/src/styling/ng2/index.html b/modules/benchmarks/src/styling/ng2/index.html
new file mode 100644
index 0000000000..e2a01fab21
--- /dev/null
+++ b/modules/benchmarks/src/styling/ng2/index.html
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+
+
+
+
+ Styling bindings benchmark
+
+
+
+
+
+
+
+
+
+
+
+ Loading...
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/modules/benchmarks/src/styling/ng2/index_aot.ts b/modules/benchmarks/src/styling/ng2/index_aot.ts
new file mode 100644
index 0000000000..e9064fe144
--- /dev/null
+++ b/modules/benchmarks/src/styling/ng2/index_aot.ts
@@ -0,0 +1,16 @@
+/**
+ * @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 {enableProdMode} from '@angular/core';
+import {platformBrowser} from '@angular/platform-browser';
+
+import {init} from './init';
+import {StylingModuleNgFactory} from './styling.ngfactory';
+
+enableProdMode();
+platformBrowser().bootstrapModuleFactory(StylingModuleNgFactory).then(init);
diff --git a/modules/benchmarks/src/styling/ng2/init.ts b/modules/benchmarks/src/styling/ng2/init.ts
new file mode 100644
index 0000000000..bec87b75bf
--- /dev/null
+++ b/modules/benchmarks/src/styling/ng2/init.ts
@@ -0,0 +1,65 @@
+/**
+ * @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 {ApplicationRef, NgModuleRef} from '@angular/core';
+import {bindAction, profile} from '../../util';
+import {StylingModule} from './styling';
+
+const empty = [];
+const items = [];
+for (let i = 0; i < 2000; i++) {
+ items.push(i);
+}
+
+
+export function init(moduleRef: NgModuleRef) {
+ const injector = moduleRef.injector;
+ const appRef = injector.get(ApplicationRef);
+ const componentRef = appRef.components[0];
+ const component = componentRef.instance;
+ const componentHostEl = componentRef.location.nativeElement;
+ const select = document.querySelector('#scenario-select') !as HTMLSelectElement;
+
+ function create(tplRefIdx: number) {
+ component.tplRefIdx = tplRefIdx;
+ component.data = items;
+ appRef.tick();
+ }
+
+ function destroy() {
+ component.data = empty;
+ appRef.tick();
+ }
+
+ function detectChanges() {
+ component.exp = component.exp === 'bar' ? 'baz' : 'bar';
+ appRef.tick();
+ }
+
+ function modifyExternally() {
+ const buttonEls = componentHostEl.querySelectorAll('button') as HTMLButtonElement[];
+ buttonEls.forEach((buttonEl: HTMLButtonElement) => {
+ const cl = buttonEl.classList;
+ if (cl.contains('external')) {
+ cl.remove('external');
+ } else {
+ cl.add('external');
+ }
+ });
+ }
+
+ bindAction('#create', () => create(select.selectedIndex));
+ bindAction('#detectChanges', detectChanges);
+ bindAction('#destroy', destroy);
+ bindAction('#profile', profile(() => {
+ for (let i = 0; i < 10; i++) {
+ detectChanges();
+ }
+ }, () => {}, 'detect changes'));
+ bindAction('#modify', modifyExternally);
+}
diff --git a/modules/benchmarks/src/styling/ng2/styling.ts b/modules/benchmarks/src/styling/ng2/styling.ts
new file mode 100644
index 0000000000..6b6c8241b0
--- /dev/null
+++ b/modules/benchmarks/src/styling/ng2/styling.ts
@@ -0,0 +1,43 @@
+/**
+ * @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, TemplateRef} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+
+@Component({
+ selector: 'styling-bindings',
+ template: `
+
+
+
+
+
+
+
+
+
+
+
+ `
+})
+export class StylingComponent {
+ data: number[] = [];
+ exp: string = 'bar';
+ tplRefIdx: number = 0;
+ staticStyle = {width: '10px'};
+
+ getTplRef(...tplRefs): TemplateRef { return tplRefs[this.tplRefIdx]; }
+}
+
+@NgModule({
+ imports: [BrowserModule],
+ declarations: [StylingComponent],
+ bootstrap: [StylingComponent],
+})
+export class StylingModule {
+}
\ No newline at end of file