diff --git a/modules/examples/e2e_test/zippy_component/zippy_spec.dart b/modules/examples/e2e_test/zippy_component/zippy_spec.dart
new file mode 100644
index 0000000000..8d232807d6
--- /dev/null
+++ b/modules/examples/e2e_test/zippy_component/zippy_spec.dart
@@ -0,0 +1,5 @@
+library examples.e2e_test.zippy_component.zippy_spec;
+
+main() {
+
+}
diff --git a/modules/examples/e2e_test/zippy_component/zippy_spec.ts b/modules/examples/e2e_test/zippy_component/zippy_spec.ts
new file mode 100644
index 0000000000..d1bb64b493
--- /dev/null
+++ b/modules/examples/e2e_test/zippy_component/zippy_spec.ts
@@ -0,0 +1,31 @@
+import {verifyNoBrowserErrors} from 'angular2/src/test_lib/e2e_util';
+
+describe('Zippy Component', function() {
+
+ afterEach(verifyNoBrowserErrors);
+
+ describe('dynamic reflection', function() {
+ var URL = 'examples/src/zippy_component/index.html';
+
+ beforeEach(function() { browser.get(URL); });
+
+ it('should change the zippy title depending on it\'s state', function() {
+ var zippyTitle = element(by.css('.zippy__title'));
+
+ expect(zippyTitle.getText()).toEqual('▾ Details');
+ zippyTitle.click();
+ expect(zippyTitle.getText()).toEqual('▸ Details');
+ });
+
+ it('should have zippy content', function() {
+ expect(element(by.css('.zippy__content')).getText()).toEqual('This is some content.');
+ });
+
+ it('should toggle when the zippy title is clicked', function() {
+ element(by.css('.zippy__title')).click();
+ expect(element(by.css('.zippy__content')).isDisplayed()).toEqual(false);
+ element(by.css('.zippy__title')).click();
+ expect(element(by.css('.zippy__content')).isDisplayed()).toEqual(true);
+ });
+ });
+});
diff --git a/modules/examples/src/zippy_component/index.html b/modules/examples/src/zippy_component/index.html
new file mode 100644
index 0000000000..01b214421c
--- /dev/null
+++ b/modules/examples/src/zippy_component/index.html
@@ -0,0 +1,11 @@
+
+
+
Zippy Angular 2.0
+
+
+ Loading...
+
+
+ $SCRIPTS$
+
+
diff --git a/modules/examples/src/zippy_component/index.ts b/modules/examples/src/zippy_component/index.ts
new file mode 100644
index 0000000000..f03c4a5f79
--- /dev/null
+++ b/modules/examples/src/zippy_component/index.ts
@@ -0,0 +1,27 @@
+import {bootstrap, Component, View, NgFor} from 'angular2/angular2';
+import {reflector} from 'angular2/src/reflection/reflection';
+import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabilities';
+import {Zippy} from './zippy';
+
+@Component({selector: 'zippy-app'})
+@View({
+ template: `
+
+ This is some content.
+
+
+ `,
+ directives: [Zippy, NgFor]
+})
+class ZippyApp {
+ logs: Array = [];
+
+ pushLog(log: string) { this.logs.push(log); }
+}
+
+export function main() {
+ reflector.reflectionCapabilities = new ReflectionCapabilities();
+ bootstrap(ZippyApp);
+}
diff --git a/modules/examples/src/zippy_component/zippy.html b/modules/examples/src/zippy_component/zippy.html
new file mode 100644
index 0000000000..295334927a
--- /dev/null
+++ b/modules/examples/src/zippy_component/zippy.html
@@ -0,0 +1,8 @@
+
+
+ {{ visible ? '▾' : '▸' }} {{title}}
+
+
+
+
+
diff --git a/modules/examples/src/zippy_component/zippy.ts b/modules/examples/src/zippy_component/zippy.ts
new file mode 100644
index 0000000000..641674f7ac
--- /dev/null
+++ b/modules/examples/src/zippy_component/zippy.ts
@@ -0,0 +1,24 @@
+import {Component, View, EventEmitter} from 'angular2/angular2';
+import {ObservableWrapper} from 'angular2/src/facade/async';
+
+@Component({
+ selector: 'zippy',
+ properties: ['title'],
+ events: ['openHandler: open', 'closeHandler: close']
+})
+@View({templateUrl: 'zippy.html'})
+export class Zippy {
+ visible: boolean = true;
+ title: string = '';
+ openHandler: EventEmitter = new EventEmitter();
+ closeHandler: EventEmitter = new EventEmitter();
+
+ toggle() {
+ this.visible = !this.visible;
+ if (this.visible) {
+ ObservableWrapper.callNext(this.openHandler, null);
+ } else {
+ ObservableWrapper.callNext(this.closeHandler, null);
+ }
+ }
+}
diff --git a/tools/broccoli/trees/browser_tree.ts b/tools/broccoli/trees/browser_tree.ts
index ccb39fe28c..9c33b93fe9 100644
--- a/tools/broccoli/trees/browser_tree.ts
+++ b/tools/broccoli/trees/browser_tree.ts
@@ -46,6 +46,7 @@ const kServedPaths = [
'examples/src/key_events',
'examples/src/sourcemap',
'examples/src/todo',
+ 'examples/src/zippy_component',
'examples/src/material/button',
'examples/src/material/checkbox',
'examples/src/material/dialog',