Implement Renderer.setElementStyle.

Support style bindings:
 - [ngStyle]="{'background-color': 'red'}"
 - [style.backgroundColor]="'red'"

Author: hdeshev

src/nativescript-angular/view-util.ts

@@ -5,6 +5,9 @@ import {ContentView} from 'ui/content-view';
 import {LayoutBase} from 'ui/layouts/layout-base';
 import {ViewClass, getViewClass, getViewMeta, isKnownView, ViewExtensions, NgView, ViewClassMeta} from './element-registry';
 import {getSpecialPropertySetter} from "ui/builder/special-properties";
+import * as styleProperty from "ui/styling/style-property";
+import {StyleProperty, getPropertyByName, withStyleProperty} from "ui/styling/style-property";
+import {ValueSource} from "ui/core/dependency-observable";
 import { ActionBar, ActionItem, NavigationButton } from "ui/action-bar";
 import trace = require("trace");
 import {device, platformNames, Device} from "platform";
@@ -287,7 +290,38 @@ export class ViewUtil {
         view.cssClass = classValue;
     }
 
+    private resolveCssValue(styleValue: string): string {
+        return styleValue;
+    }
+
+    private setStyleValue(view: NgView, property: StyleProperty, value: any) {
+        try {
+            view.style._setValue(property, value, ValueSource.Local);
+        } catch (ex) {
+            trace.write("Error setting property: " + property.name + " view: " + view + " value: " + value + " " + ex, trace.categories.Style, trace.messageType.error);
+        }
+    }
+
     public setStyleProperty(view: NgView, styleName: string, styleValue: string): void {
-        throw new Error("Not implemented: setStyleProperty");
+        traceLog("setStyleProperty: " + styleName + " = " + styleValue);
+
+        let name = styleName;
+        let resolvedValue = this.resolveCssValue(styleValue);
+        withStyleProperty(name, resolvedValue, (property, value) => {
+            if (isString(property)) {
+                //Fall back to resolving property by name.
+                const propertyName = <string>property;
+                const resolvedProperty = getPropertyByName(name);
+                if (resolvedProperty) {
+                    this.setStyleValue(view, resolvedProperty, resolvedValue);
+                } else {
+                    traceLog("Unknown style property: " + styleName);
+                }
+            } else {
+                const resolvedProperty = <StyleProperty>property;
+                this.setStyleValue(view, resolvedProperty, resolvedValue);
+            }
+
+        });
     }
 }

tests/app/tests/style-properties.ts

@@ -0,0 +1,36 @@
+//make sure you import mocha-config before @angular/core
+import {assert} from "./test-config";
+import {TextField} from "ui/text-field";
+import {Red, Lime} from "color/known-colors";
+import {NativeScriptRenderer, NativeScriptRootRenderer} from "nativescript-angular/renderer";
+import {device} from "platform";
+import {RenderComponentType} from '@angular/core/src/render/api';
+import {NgView} from "nativescript-angular/view-util";
+
+describe("Setting style properties", () => {
+    let renderer: NativeScriptRenderer = null;
+    let element: NgView = null;
+
+    beforeEach(() => {
+        const rootRenderer = new NativeScriptRootRenderer(null, device);
+        const componentType = new RenderComponentType("id", "templateUrl", 0,
+                                                            null, []);
+        renderer = new NativeScriptRenderer(rootRenderer, componentType);
+        element = <NgView><any>new TextField();
+    });
+
+    it("resolves hyphenated CSS names", () => {
+        renderer.setElementStyle(element, "background-color", "red");
+        assert.equal(Red, element.style.backgroundColor.hex);
+    });
+
+    it("resolves camel-cased JavaScript names", () => {
+        renderer.setElementStyle(element, "backgroundColor", "lime");
+        assert.equal(Lime, element.style.backgroundColor.hex);
+    });
+
+    it("resolves CSS shorthand properties", () => {
+        renderer.setElementStyle(element, "font", "12");
+        assert.equal(12, element.style.fontSize);
+    });
+})