Skip to content

Unexpected behaviour for falsy values when using arrays in class binding #48473

@undsoft

Description

@undsoft

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

common

Is this a regression?

No

Description

<div 
  [class]="['as-array', 'as-array2']" 
  [class.specific]="true"
></div>
// Applied: All classes are applied

<div
  [class]="['as-array', '', 'as-array2']" 
  [class.specific]="true"
></div>
// Applied: .specific

<div 
  [class]="['as-array', false, 'as-array2']" 
  [class.specific]="true"
></div>
// Applied: .as-array .false .as-array2 .specific

<div 
  [class]="['as-array', undefined, 'as-array2']" 
  [class.specific]="true"
></div>
// Applied: .as-array

<div 
  [class]="['as-array', null, 'as-array2']" 
  [class.specific]="true"
></div>
// Applied: No classes were applied.

My expectation is basically that falsy values in an array will not be printed and will not affect other class declarations.
Basically I always expect to get .as-array .as-array2 .specific.

I cannot find logic in how it current works. There are 4 different behaviours based on what falsy value is used.
This can lead to unexpected behaviour and hard to diagnose errors.

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/angular-ivy-amqsbq?file=src/app/app.component.htmlpp%2Fapp.component.html

Please provide the exception or error you saw

No response

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

Angular 15.0.2
Node v16.16.0

Anything else?

No response

Metadata

Metadata

Assignees

Labels

P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: coreIssues related to the framework runtimebugcore: styling bindingsstate: has PR

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions