diff --git a/nativescript-angular/renderer.ts b/nativescript-angular/renderer.ts
index 450c27f5d..aadc69a1a 100644
--- a/nativescript-angular/renderer.ts
+++ b/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;
}
diff --git a/tests/app/tests/renderer-tests.ts b/tests/app/tests/renderer-tests.ts
index 2a0984ed3..49c59ff2a 100644
--- a/tests/app/tests/renderer-tests.ts
+++ b/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: ``
@@ -97,6 +98,37 @@ export class StyledLabelCmp2 {
}
}
+@Component({
+ selector: "host-styled",
+ styles: [`
+ Label {
+ color: blue;
+ }
+
+ :host Label {
+ color: red;
+ }
+ `
+ ],
+ template: ``
+})
+export class HostStyledCmp {
+ constructor(public elementRef: ElementRef) {
+ }
+}
+
+@Component({
+ selector: "host-styled-parent",
+ template: `
+
+
+ `
+})
+export class HostStyledParentCmp {
+ constructor(public elementRef: ElementRef) {
+ }
+}
+
@Component({
selector: "ng-if-label",
template: ``
@@ -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 = fixture.componentRef;