fix(1845): CSS special selector ":host" only work first time (#1852)

* fix(1845): CSS special selector ":host" only work first time

* test(HostSelector): Adds test for the :host css-selector

Author: m-abs

nativescript-angular/renderer.ts

@@ -57,8 +57,12 @@ export class NativeScriptRendererFactory implements RendererFactory2 {
             return this.defaultRenderer;
         }
 
-        let renderer: NativeScriptRenderer = this.componentRenderers.get(type.id);
+        let renderer = this.componentRenderers.get(type.id);
         if (renderer) {
+            if (renderer instanceof EmulatedRenderer) {
+                renderer.applyToHost(element);
+            }
+
             return renderer;
         }
 

tests/app/tests/renderer-tests.ts

@@ -16,6 +16,7 @@ import { View, fontInternalProperty, backgroundInternalProperty } from "tns-core
 import { nsTestBedAfterEach, nsTestBedBeforeEach, nsTestBedRender } from "nativescript-angular/testing";
 import { ComponentFixture, TestBed, async } from "@angular/core/testing";
 import { Observable, ReplaySubject } from "rxjs";
+import { Label } from "tns-core-modules/ui/label/label";
 
 @Component({
     template: `<StackLayout><Label text="Layout"></Label></StackLayout>`
@@ -97,6 +98,37 @@ export class StyledLabelCmp2 {
     }
 }
 
+@Component({
+    selector: "host-styled",
+    styles: [`
+        Label {
+            color: blue;
+        }
+
+        :host Label {
+            color: red;
+        }
+    `
+    ],
+    template: `<Label text="Styled!"></Label>`
+})
+export class HostStyledCmp {
+    constructor(public elementRef: ElementRef<ProxyViewContainer>) {
+    }
+}
+
+@Component({
+    selector: "host-styled-parent",
+    template: `
+        <host-styled></host-styled>
+        <host-styled></host-styled>
+    `
+})
+export class HostStyledParentCmp {
+    constructor(public elementRef: ElementRef<ProxyViewContainer>) {
+    }
+}
+
 @Component({
     selector: "ng-if-label",
     template: `<Label *ngIf="show" text="iffed"></Label>`
@@ -251,6 +283,7 @@ describe("Renderer E2E", () => {
         LayoutWithLabel, LabelCmp, LabelContainer,
         ProjectableCmp, ProjectionContainer,
         StyledLabelCmp, StyledLabelCmp2,
+        HostStyledCmp, HostStyledParentCmp,
         NgIfLabel, NgIfThenElseComponent, NgIfMultiple,
         NgIfTwoElements, NgIfMultiple,
         NgIfElseComponent, NgIfThenElseComponent,
@@ -293,6 +326,18 @@ describe("Renderer E2E", () => {
         });
     });
 
+    it("applies component :host styles", () => {
+        return nsTestBedRender(HostStyledParentCmp).then((fixture) => {
+            const proxyView = fixture.componentRef.instance.elementRef.nativeElement;
+
+            for (let i = 0; i < 2; i += 1) {
+                const child = proxyView.getChildAt(i) as ProxyViewContainer;
+                const label = child.getChildAt(0) as Label;
+                assert.equal(Red, label.style.color.hex);
+            }
+        });
+    });
+
     it("applies component styles from multiple sources", () => {
         return nsTestBedRender(StyledLabelCmp2).then((fixture) => {
             const componentRef: ComponentRef<StyledLabelCmp2> = fixture.componentRef;