diff --git a/packages/core/src/render3/styling/util.ts b/packages/core/src/render3/styling/util.ts index e2d9ee73c4..e2a9c14d27 100644 --- a/packages/core/src/render3/styling/util.ts +++ b/packages/core/src/render3/styling/util.ts @@ -9,7 +9,7 @@ import '../../util/ng_dev_mode'; import {StyleSanitizeFn} from '../../sanitization/style_sanitizer'; import {getLContext} from '../context_discovery'; -import {LContainer} from '../interfaces/container'; +import {LCONTAINER_LENGTH, LContainer} from '../interfaces/container'; import {LContext} from '../interfaces/context'; import {AttributeMarker, TAttributes, TNode, TNodeFlags} from '../interfaces/node'; import {PlayState, Player, PlayerContext, PlayerIndex} from '../interfaces/player'; @@ -96,7 +96,7 @@ export function getStylingContext(index: number, viewData: LView): StylingContex export function isStylingContext(value: any): value is StylingContext { // Not an LView or an LContainer return Array.isArray(value) && typeof value[StylingIndex.MasterFlagPosition] === 'number' && - Array.isArray(value[StylingIndex.InitialStyleValuesPosition]); + value.length !== LCONTAINER_LENGTH; } export function isAnimationProp(name: string): boolean { diff --git a/packages/core/test/render3/host_binding_spec.ts b/packages/core/test/render3/host_binding_spec.ts index 821d43dcc7..a01e8a4dbb 100644 --- a/packages/core/test/render3/host_binding_spec.ts +++ b/packages/core/test/render3/host_binding_spec.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.io/license */ -import {ElementRef, QueryList} from '@angular/core'; +import {ElementRef, QueryList, ViewContainerRef} from '@angular/core'; import {AttributeMarker, defineComponent, template, defineDirective, InheritDefinitionFeature, ProvidersFeature} from '../../src/render3/index'; import {allocHostVars, bind, directiveInject, element, elementAttribute, elementEnd, elementProperty, elementStyleProp, elementStyling, elementStylingApply, elementStart, listener, load, text, textBinding, loadQueryList, registerContentQuery, elementHostAttrs} from '../../src/render3/instructions'; @@ -1131,6 +1131,58 @@ describe('host bindings', () => { expect(hostBindingEl.style.width).toEqual('5px'); }); + it('should bind to host styles on containers', () => { + let hostBindingDir !: HostBindingToStyles; + /** + * host: { + * '[style.width.px]': 'width' + * } + */ + class HostBindingToStyles { + width = 2; + + static ngDirectiveDef = defineDirective({ + type: HostBindingToStyles, + selectors: [['', 'hostStyles', '']], + factory: () => hostBindingDir = new HostBindingToStyles(), + hostBindings: (rf: RenderFlags, ctx: HostBindingToStyles, elIndex: number) => { + if (rf & RenderFlags.Create) { + elementStyling(null, ['width'], null, ctx); + } + if (rf & RenderFlags.Update) { + elementStyleProp(0, 0, ctx.width, 'px', ctx); + elementStylingApply(0, ctx); + } + } + }); + } + + class ContainerDir { + constructor(public vcr: ViewContainerRef) {} + + static ngDirectiveDef = defineDirective({ + type: ContainerDir, + selectors: [['', 'containerDir', '']], + factory: () => new ContainerDir(directiveInject(ViewContainerRef as any)), + }); + } + + /**
*/ + const App = createComponent('app', (rf: RenderFlags, ctx: any) => { + if (rf & RenderFlags.Create) { + element(0, 'div', ['containerDir', '', 'hostStyles', '']); + } + }, 1, 0, [ContainerDir, HostBindingToStyles]); + + const fixture = new ComponentFixture(App); + const hostBindingEl = fixture.hostElement.querySelector('div') as HTMLElement; + expect(hostBindingEl.style.width).toEqual('2px'); + + hostBindingDir.width = 5; + fixture.update(); + expect(hostBindingEl.style.width).toEqual('5px'); + }); + it('should apply static host classes', () => { /** * host: {