diff --git a/modules/angular2/src/render/dom/dom_renderer.ts b/modules/angular2/src/render/dom/dom_renderer.ts
index 3b2dbb2896..602b810285 100644
--- a/modules/angular2/src/render/dom/dom_renderer.ts
+++ b/modules/angular2/src/render/dom/dom_renderer.ts
@@ -147,7 +147,7 @@ export class DomRenderer extends Renderer {
// Reflect the property value as an attribute value with ng-reflect- prefix.
if (this._reflectPropertiesAsAttributes) {
this.setElementAttribute(location, `${REFLECT_PREFIX}${camelCaseToDashCase(propertyName)}`,
- propertyValue);
+ `${propertyValue}`);
}
}
diff --git a/modules/angular2/test/render/dom/dom_renderer_integration_spec.ts b/modules/angular2/test/render/dom/dom_renderer_integration_spec.ts
index b6c2f0c957..b64284c73e 100644
--- a/modules/angular2/test/render/dom/dom_renderer_integration_spec.ts
+++ b/modules/angular2/test/render/dom/dom_renderer_integration_spec.ts
@@ -146,6 +146,26 @@ export function main() {
async.done();
});
}));
+
+ it('should reflect non-string property values as attributes if flag is set',
+ inject([AsyncTestCompleter, DomTestbed], (async, tb) => {
+ tb.compileAndMerge(someComponent,
+ [
+ new ViewDefinition({
+ componentId: 'someComponent',
+ template: '',
+ directives: []
+ })
+ ])
+ .then((protoViewMergeMappings) => {
+ var rootView = tb.createView(protoViewMergeMappings);
+ var el = DOM.childNodes(rootView.hostElement)[0];
+ tb.renderer.setElementProperty(elRef(rootView.viewRef, 1), 'maxLength', 20);
+ expect(DOM.getAttribute(el, 'ng-reflect-max-length'))
+ .toEqual('20');
+ async.done();
+ });
+ }));
});
if (DOM.supportsDOMEvents()) {