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;