diff --git a/modules/examples/e2e_test/hello_world/hello_world_spec.es6 b/modules/examples/e2e_test/hello_world/hello_world_spec.es6
index 5612e55a5c..3d06ef3971 100644
--- a/modules/examples/e2e_test/hello_world/hello_world_spec.es6
+++ b/modules/examples/e2e_test/hello_world/hello_world_spec.es6
@@ -9,7 +9,14 @@ describe('hello world', function () {
     it('should greet', function() {
       browser.get(URL);
 
-      expect(getGreetingText('hello-app')).toBe('hello world!');
+      expect(getComponentText('hello-app', '.greeting')).toBe('hello world!');
+    });
+
+    it('should change greeting', function() {
+      browser.get(URL);
+
+      clickComponentButton('hello-app', '.changeButton');
+      expect(getComponentText('hello-app', '.greeting')).toBe('howdy world!');
     });
   });
 
@@ -19,12 +26,23 @@ describe('hello world', function () {
     it('should greet', function() {
       browser.get(URL);
 
-      expect(getGreetingText('hello-app')).toBe('hello world!');
+      expect(getComponentText('hello-app', '.greeting')).toBe('hello world!');
+    });
+
+    it('should change greeting', function() {
+      browser.get(URL);
+
+      clickComponentButton('hello-app', '.changeButton');
+      expect(getComponentText('hello-app', '.greeting')).toBe('howdy world!');
     });
   });
 
 });
 
-function getGreetingText(selector) {
-  return browser.executeScript('return document.querySelector("'+selector+'").shadowRoot.firstChild.textContent');
+function getComponentText(selector, innerSelector) {
+  return browser.executeScript('return document.querySelector("'+selector+'").shadowRoot.querySelector("'+innerSelector+'").textContent');
+}
+
+function clickComponentButton(selector, innerSelector) {
+  return browser.executeScript('return document.querySelector("'+selector+'").shadowRoot.querySelector("'+innerSelector+'").click()');
 }
diff --git a/modules/examples/src/hello_world/index_common.js b/modules/examples/src/hello_world/index_common.js
index b2950e4d51..5d0a90d772 100644
--- a/modules/examples/src/hello_world/index_common.js
+++ b/modules/examples/src/hello_world/index_common.js
@@ -20,8 +20,8 @@ import {bootstrap, Component, Decorator, TemplateConfig, NgElement} from 'core/c
     // The template for the component.
     // Expressions in the template (like {{greeting}}) are evaluated in the
     // context of the HelloCmp class below.
-    inline: `<div>{{greeting}} <span red>world</span>!</div>
-             <button (click)="changeGreeting()">change greeting</button>`,
+    inline: `<div class="greeting">{{greeting}} <span red>world</span>!</div>
+             <button class="changeButton" (click)="changeGreeting()">change greeting</button>`,
     // All directives used in the template need to be specified. This allows for
     // modularity (RedDec can only be used in this template)
     // and better tooling (the template can be invalidated if the attribute is
diff --git a/modules/examples/src/hello_world/index_static.js b/modules/examples/src/hello_world/index_static.js
index b72dfabc5b..17270e75d1 100644
--- a/modules/examples/src/hello_world/index_static.js
+++ b/modules/examples/src/hello_world/index_static.js
@@ -19,7 +19,8 @@ function setup() {
       componentServices: [app.GreetingService],
       template: new TemplateConfig({
         directives: [app.RedDec],
-        inline: `{{greeting}} <span red>world</span>!`})
+        inline: `<div class="greeting">{{greeting}} <span red>world</span>!</div>
+                 <button class="changeButton" (click)="changeGreeting()">change greeting</button>`})
     })]
   });
 
@@ -84,6 +85,10 @@ function setup() {
   reflector.registerSetters({
     "greeting": (a,v) => a.greeting = v
   });
+
+  reflector.registerMethods({
+    "changeGreeting": (obj, args) => obj.changeGreeting()
+  });
 }
 
 export function main() {