fix(renderer): support namespaced attributes (#719)

Platform attributes (such as :ios and :android) are passed as
namespaces to the renderer in Angular 4.
Caused by: angular/angular#14874.

Author: hdeshev

Diff for: nativescript-angular/renderer.ts

@@ -4,7 +4,6 @@ import {
     RendererStyleFlags2, ViewEncapsulation,
 } from "@angular/core";
 
-import { escapeRegexSymbols } from "tns-core-modules/utils/utils";
 import { Device } from "tns-core-modules/platform";
 import { View } from "tns-core-modules/ui/core/view";
 import { addCss } from "tns-core-modules/application";
@@ -151,9 +150,10 @@ export class NativeScriptRenderer extends Renderer2 {
         // Seems to be called on component dispose only (router outlet)
         // TODO: handle this when we resolve routing and navigation.
     }
-    setAttribute(view: NgView, name: string, value: string) {
-        traceLog(`NativeScriptRenderer.setAttribute ${view} : ${name} = ${value}`);
-        return this.setProperty(view, name, value);
+
+    setAttribute(view: NgView, name: string, value: string, namespace?: string) {
+        traceLog(`NativeScriptRenderer.setAttribute ${view} : ${name} = ${value}, namespace: ${namespace}`);
+        return this.viewUtil.setProperty(view, name, value, namespace);
     }
 
     removeAttribute(_el: NgView, _name: string): void {
@@ -162,7 +162,7 @@ export class NativeScriptRenderer extends Renderer2 {
 
     setProperty(view: any, name: string, value: any) {
         traceLog(`NativeScriptRenderer.setProperty ${view} : ${name} = ${value}`);
-        this.viewUtil.setProperty(view, name, value);
+        return this.viewUtil.setProperty(view, name, value);
     }
 
     addClass(view: NgView, name: string): void {

Diff for: nativescript-angular/view-util.ts

@@ -13,8 +13,6 @@ import {
 import { platformNames, Device } from "tns-core-modules/platform";
 import { rendererLog as traceLog } from "./trace";
 
-const IOS_PREFX: string = ":ios:";
-const ANDROID_PREFX: string = ":android:";
 const XML_ATTRIBUTES = Object.freeze(["style", "rows", "columns", "fontAttributes"]);
 const whiteSpaceSplitter = /\s+/;
 
@@ -146,30 +144,8 @@ export class ViewUtil {
         return view;
     }
 
-    private platformFilter(attribute: string): string {
-        let lowered = attribute.toLowerCase();
-        if (lowered.indexOf(IOS_PREFX) === 0) {
-            if (this.isIos) {
-                return attribute.substr(IOS_PREFX.length);
-            } else {
-                return null;
-            }
-        }
-
-        if (lowered.indexOf(ANDROID_PREFX) === 0) {
-            if (this.isAndroid) {
-                return attribute.substr(ANDROID_PREFX.length);
-            } else {
-                return null;
-            }
-        }
-
-        return attribute;
-    }
-
-    public setProperty(view: NgView, attributeName: string, value: any): void {
-        attributeName = this.platformFilter(attributeName);
-        if (!attributeName) {
+    public setProperty(view: NgView, attributeName: string, value: any, namespace?: string): void {
+        if (namespace && !this.runsIn(namespace)) {
             return;
         }
 
@@ -219,6 +195,12 @@ export class ViewUtil {
         return found ? index : -1;
     }
 
+    private runsIn(platform: string): boolean {
+        return (platform === "ios" && this.isIos) ||
+            (platform === "android" && this.isAndroid);
+    }
+
+
     private setPropertyInternal(view: NgView, attributeName: string, value: any): void {
         traceLog("Setting attribute: " + attributeName);
 
@@ -306,3 +288,4 @@ export class ViewUtil {
         view.style[styleName] = unsetValue;
     }
 }
+

Diff for: tests/app/tests/property-sets.ts

@@ -87,28 +87,28 @@ describe("setting View properties", () => {
     it("sets ios property in ios", () => {
         let view = new TestView();
         let testUtil = new ViewUtil(iosDevice);
-        testUtil.setProperty(view, ":ios:anyValue", "blah");
+        testUtil.setProperty(view, "anyValue", "blah", "ios");
         assert.strictEqual("blah", view.anyValue);
     });
 
     it("doesn\'t set android property in ios", () => {
         let view = new TestView();
         let testUtil = new ViewUtil(iosDevice);
-        testUtil.setProperty(view, ":android:anyValue", "blah");
+        testUtil.setProperty(view, "anyValue", "blah", "android");
         assert.isUndefined(view.anyValue);
     });
 
     it("sets android property in android", () => {
         let view = new TestView();
         let testUtil = new ViewUtil(androidDevice);
-        testUtil.setProperty(view, ":android:anyValue", "blah");
+        testUtil.setProperty(view, "anyValue", "blah", "android");
         assert.strictEqual("blah", view.anyValue);
     });
 
     it("doesn\'t set ios property in android", () => {
         let view = new TestView();
         let testUtil = new ViewUtil(androidDevice);
-        testUtil.setProperty(view, ":ios:anyValue", "blah");
+        testUtil.setProperty(view, "anyValue", "blah", "ios");
         assert.isUndefined(view.anyValue);
     });
 });