Added support for component specific css.

Author: Nedyalko Nikolov

ng-sample/app/examples/list/list-test-async.css

@@ -0,0 +1,3 @@
+.test { 
+    background-color: cornflowerblue; 
+}

ng-sample/app/examples/list/list-test-async.ts

@@ -8,12 +8,13 @@ class DataItem {
 
 @Component({
     selector: 'list-test-async',
+    styleUrls: ['examples/list/list-test-async.css'],
     template: `
             <ListView [items]="myItems | async" (itemTap)="onItemTap($event)">
                 <item-template>
                     <template #item="item" #i="index" #odd="odd" #even="even">
                         <StackLayout [class.odd]="odd" [class.even]="even">
-                            <Label [text]='"index: " + item.name'></Label>
+                            <Label className="test" [text]='"index: " + item.name'></Label>
                         </StackLayout>
                     </template>
                 </item-template>

src/nativescript-angular/renderer.ts

@@ -7,8 +7,10 @@ import {
 } from 'angular2/src/core/render/api';
 import {isBlank} from 'angular2/src/facade/lang';
 import {DOM} from 'angular2/src/platform/dom/dom_adapter';
+import {COMPONENT_VARIABLE, CONTENT_ATTR} from 'angular2/src/platform/dom/dom_renderer';
 import {View} from "ui/core/view";
 import {topmost} from 'ui/frame';
+import {Page} from 'ui/page';
 import * as util from "./view-util";
 
 //var console = {log: function(msg) {}}
@@ -29,8 +31,18 @@ export class NativeScriptRootRenderer extends RootRenderer {
 
 @Injectable()
 export class NativeScriptRenderer extends Renderer {
+    private componentProtoId: string;
+    private hasComponentStyles: boolean;
     constructor(private _rootRenderer: NativeScriptRootRenderer, private componentProto: RenderComponentType) {
         super();
+        let page =<Page>(<any>topmost()).currentPage;
+        let stylesLength = componentProto.styles.length;
+        this.componentProtoId = componentProto.id;
+        for(let i = 0; i < stylesLength; i++) {
+            this.hasComponentStyles = true;
+            let cssString = componentProto.styles[i] + "";
+            page.addCss(cssString.replace(COMPONENT_VARIABLE, componentProto.id));
+        }
         console.log('NativeScriptRenderer created');
     }
 
@@ -126,7 +138,6 @@ export class NativeScriptRenderer extends Renderer {
         console.log('NativeScriptRenderer.setElementDebugInfo: ' + renderElement);
     }
 
-
     /**
     * Calls a method on an element.
     */
@@ -145,7 +156,13 @@ export class NativeScriptRenderer extends Renderer {
 
     public createElement(parentElement: util.NgView, name: string): util.NgView {
         console.log('NativeScriptRenderer.createElement: ' + name + ' parent: ' + parentElement + ', ' + (parentElement ? parentElement.nodeName : 'null'));
-        return util.createView(name, parentElement);
+        let result = util.createView(name, parentElement);
+        // adding an attribute (property) to {N} view for applying component specific css. 
+        // The property value is generated by angular2 infrastructure on conponent creation. 
+        if (this.hasComponentStyles) {
+            result[CONTENT_ATTR.replace(COMPONENT_VARIABLE, this.componentProtoId)] = true;
+        }
+        return result;
     }
 
     public createText(value: string): util.NgView {
@@ -163,4 +180,4 @@ export class NativeScriptRenderer extends Renderer {
     public listenGlobal(target: string, eventName: string, callback: Function): Function {
         throw new Error('Not implemented.');
     }
-}
+}