diff --git a/demo-shell-ng2/app/components/page2.view.ts b/demo-shell-ng2/app/components/page2.view.ts
index 787b8b087a..df28c2eb09 100644
--- a/demo-shell-ng2/app/components/page2.view.ts
+++ b/demo-shell-ng2/app/components/page2.view.ts
@@ -7,7 +7,8 @@ import {Component} from "angular2/core";
Page 2
Username: {{username}}
-
+
+
`
diff --git a/demo-shell-ng2/app/web-components/helloworld/helloworld.html b/demo-shell-ng2/app/web-components/helloworld/helloworld.html
index ba4b7e11ef..2c8bcdde22 100644
--- a/demo-shell-ng2/app/web-components/helloworld/helloworld.html
+++ b/demo-shell-ng2/app/web-components/helloworld/helloworld.html
@@ -15,7 +15,16 @@
var template = thisDoc.querySelector('template').content;
// Creates an object based in the HTML Element prototype
- var MyElementProto = Object.create(HTMLElement.prototype);
+ var _text = '_text';
+ var MyElementProto = Object.create(HTMLElement.prototype, {
+ text: {
+ get: function() { return _text; },
+ set: function(newValue) {
+ _text = newValue;
+ this.setText(newValue);
+ }
+ }
+ });
// Creates the "who" attribute and sets a default value
MyElementProto.who = 'World';
@@ -29,31 +38,31 @@
shadowRoot.appendChild(clone);
// Caches DOM query
this.strong = shadowRoot.querySelector('strong');
- // Checks if the "who" attribute has been overwritten
- if (this.hasAttribute('who')) {
- var who = this.getAttribute('who');
- this.setWho(who);
+
+ // Checks if the "text" attribute has been overwritten
+ /*
+ if (this.hasAttribute('text')) {
+ var text = this.getAttribute('text');
+ this.setText(text);
}
else {
- this.setWho(this.who);
+ this.setText(this.text);
}
+ */
};
+
// Fires when an attribute was added, removed, or updated
MyElementProto.attributeChangedCallback = function(attr, oldVal, newVal) {
- if (attr === 'who') {
- this.setWho(newVal);
- }
-
if (attr === 'text') {
- this.setWho(newVal);
+ this.setText(newVal);
}
};
- // Sets new value to "who" attribute
- MyElementProto.setWho = function(val) {
- this.who = val;
- // Sets "who" value into
- this.strong.textContent = this.who;
+
+ MyElementProto.setText = function(val) {
+ _text = val;
+ this.strong.textContent = val;
};
+
// Registers in the main document
window.MyElement = thatDoc.registerElement('hello-world', {
prototype: MyElementProto