Skip to content

SSR style property binding with null or undefined results invalid/empty style property #46385

@ruvkr

Description

@ruvkr

Which @angular/* package(s) are the source of the bug?

platform-server

Is this a regression?

No

Description

Style property bindings with null or undefined are skiped in Angular but not when using ssr.

Template

<h1 [style.color]="null" [style.--bg-color]="undefined">{{ title }}</h1>

Result: Angular

<h1 _ngcontent-serverapp-c16="">ssr-style-binding-test</h1>

Result: SSR

<h1 _ngcontent-sc16="" style="color:;--bg-color:;">ssr-style-binding-test</h1>

Empty style properties are invalid and custom properties are overriding default values.

Please provide a link to a minimal reproduction of the bug

https://github.com/ruvkr/ssr-style-binding-test.git

  1. ng new ssr-style-binding-test (router:Yes, style:SCSS)
  2. ng add @nguniversal/express-engine
  3. Add <h1 [style.color]="null" [style.--bg-color]="undefined">{{ title }}</h1> to app.component.html
  4. Add h1 { --bg-color: skyblue; color: red; background-color: var(--bg-color); } to app.component.scss
  5. npm run dev:ssr

Please provide the exception or error you saw

No exceptions

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 14.0.2
Node: 16.15.1
Package Manager: npm 8.12.2 
OS: linux x64

Angular: 14.0.2
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1400.2
@angular-devkit/build-angular   14.0.2
@angular-devkit/core            14.0.2
@angular-devkit/schematics      14.0.2
@nguniversal/builders           14.0.1
@nguniversal/express-engine     14.0.1
@schematics/angular             14.0.2
rxjs                            7.5.5
typescript                      4.7.3

Anything else?

I saw #35735 (comment). But it was closed.

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions