Add styles with object id

Author: irustm

src/app/app.component.html

@@ -1,6 +1,7 @@
 <window title="Angular app in window!">
-  <view>
+  <view id="app">
     <image
+      id="image"
       [src]="'C:/temp/angular.png'"
       [aspectRatioMode]="aspectRatioMode"
     ></image>

src/app/app.component.ts

@@ -1,9 +1,19 @@
-import { Component } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
 import { AspectRatioMode } from '@nodegui/nodegui';
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html'
+  templateUrl: './app.component.html',
+  styles: [
+    `
+      #app {
+        background-color: gray;
+      }
+      #image {
+      }
+    `
+  ],
+  encapsulation: ViewEncapsulation.None
 })
 export class AppComponent {
   public name = 'World!';

src/lib/components/view.ts

@@ -32,7 +32,16 @@ export class NgView extends QWidget implements NgComponent {
     name: string,
     value: string,
     namespace?: string | null
-  ): void {}
+  ): void {
+    switch (name) {
+      case 'id':
+        this.setObjectName(value);
+        break;
+
+      default:
+        break;
+    }
+  }
 
   public setProperty(name: string, value: any): void {
     throw new Error('Method not implemented.');

src/lib/renderer.ts

@@ -28,6 +28,9 @@ export class NodeguiRendererFactory implements RendererFactory2 {
   }
 
   createRenderer(hostElement: any, type: RendererType2 | null): Renderer2 {
+    if (type) {
+      hostElement.setStyleSheet(type.styles);
+    }
     return this.renderer;
   }
 }
@@ -49,6 +52,7 @@ export class NodeguiRenderer implements Renderer2 {
     if (Component) {
       return new Component();
     } else {
+      // TODO create widget with name, may be customm component
       console.warn(`${name} component is not find in components map`);
     }
   }
@@ -150,6 +154,8 @@ export class NodeguiRenderer implements Renderer2 {
     value: any,
     flags?: RendererStyleFlags2
   ): void {
+    console.log('setStyle', style);
+
     el.setStyle(style, value, flags);
   }