diff --git a/.ctags-exclude b/.ctags-exclude
index 4841229da..0b0a4b0dd 100644
--- a/.ctags-exclude
+++ b/.ctags-exclude
@@ -15,4 +15,4 @@ tests/lib
tests/src/typings
tests/typings
web
-src/*.js
+*.js
diff --git a/ng-sample/app/app.ts b/ng-sample/app/app.ts
index 4fa5c1a45..1310bf8e3 100644
--- a/ng-sample/app/app.ts
+++ b/ng-sample/app/app.ts
@@ -28,8 +28,8 @@ import {ModalTest} from "./examples/modal/modal-test";
import {PlatfromDirectivesTest} from "./examples/platform-directives/platform-directives-test";
import {RouterOutletTest} from "./examples/navigation/router-outlet-test";
-//nativeScriptBootstrap(RendererTest);
-nativeScriptBootstrap(TabViewTest);
+nativeScriptBootstrap(RendererTest);
+//nativeScriptBootstrap(TabViewTest);
//nativeScriptBootstrap(Benchmark);
//nativeScriptBootstrap(ListTest);
//nativeScriptBootstrap(ListTestAsync);
diff --git a/ng-sample/app/examples/renderer-test.html b/ng-sample/app/examples/renderer-test.html
index aa9fa5f18..09f7673ef 100644
--- a/ng-sample/app/examples/renderer-test.html
+++ b/ng-sample/app/examples/renderer-test.html
@@ -5,8 +5,8 @@
-->
-
-
+
+
diff --git a/ng-sample/package.json b/ng-sample/package.json
index 396ae6dbd..2bdb6395b 100644
--- a/ng-sample/package.json
+++ b/ng-sample/package.json
@@ -23,7 +23,7 @@
},
"homepage": "https://github.com/NativeScript/template-hello-world",
"dependencies": {
- "tns-core-modules": "^2.0.0",
+ "tns-core-modules": "2.0.0-angular-7",
"nativescript-intl": "^0.0.2",
"@angular/common": "2.0.0-rc.1",
"@angular/compiler": "2.0.0-rc.1",
@@ -64,4 +64,4 @@
"version": "2.0.0"
}
}
-}
\ No newline at end of file
+}
diff --git a/package.json b/package.json
index bec689ff8..26f97bfc7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "nativescript-angular",
- "version": "0.1.2",
+ "version": "0.1.3",
"description": "",
"homepage": "http://www.telerik.com",
"bugs": "http://www.telerik.com",
@@ -14,7 +14,7 @@
},
"scripts": {},
"dependencies": {
- "tns-core-modules": "^2.0.0",
+ "tns-core-modules": "2.0.0-angular-7",
"nativescript-intl": "^0.0.2",
"@angular/common": "2.0.0-rc.1",
"@angular/compiler": "2.0.0-rc.1",
@@ -43,7 +43,7 @@
"typescript": "^1.8.10"
},
"peerDependencies": {
- "tns-core-modules": ">=2.0.0 || >=2.0.0-2016 || >=2.0.0-angular-4"
+ "tns-core-modules": ">=2.0.0 || >=2.0.0-2016 || >=2.0.0-angular-7"
},
"nativescript": {}
}
diff --git a/src/nativescript-angular/view-util.ts b/src/nativescript-angular/view-util.ts
index f074be8e0..5f2fc9727 100644
--- a/src/nativescript-angular/view-util.ts
+++ b/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 = property;
+ const resolvedProperty = getPropertyByName(name);
+ if (resolvedProperty) {
+ this.setStyleValue(view, resolvedProperty, resolvedValue);
+ } else {
+ traceLog("Unknown style property: " + styleName);
+ }
+ } else {
+ const resolvedProperty = property;
+ this.setStyleValue(view, resolvedProperty, resolvedValue);
+ }
+
+ });
}
}
diff --git a/tests/app/tests/style-properties.ts b/tests/app/tests/style-properties.ts
new file mode 100644
index 000000000..56205e876
--- /dev/null
+++ b/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 = 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);
+ });
+})
diff --git a/tests/package.json b/tests/package.json
index 142816149..d0498b533 100644
--- a/tests/package.json
+++ b/tests/package.json
@@ -31,7 +31,7 @@
"homepage": "http://nativescript.org",
"dependencies": {
"nativescript-unit-test-runner": "^0.3.3",
- "tns-core-modules": "^2.0.0",
+ "tns-core-modules": "2.0.0-angular-7",
"nativescript-intl": "^0.0.2",
"@angular/common": "2.0.0-rc.1",
"@angular/compiler": "2.0.0-rc.1",