angularangular-animations

Angular animations: the style() function doesn't change property unless it's in camel case


I have a transition between states. The transition receives an array and the third item in the array is the style function that should apply 'background-color' : 'red'. For some reason Angular doesn't apply the style unless I declare it with camel case: backgroundColor: 'red'.
Is this a bug or it's expected behavior?
background-color property declared with quotes background-color property declared with camel case
Here's the project on stackblitz

Here's the code snippet of declared animations:

animations: [
    trigger('numberEnteredState', [
      state(
        'unselected',
        style({
          border: '1px solid black',
          padding: '5px',
        })
      ),
      state(
        'selected',
        style({
          border: '2px solid blue',
          padding: '4px',
          'background-color': 'lightblue',
        })
      ),
      transition('unselected => selected', [
        style({
          border: '2px solid black',
          padding: '4px',
        }),
        animate('3000ms'),
        style({
          'background-color': 'red',
        }),
        animate('3000ms'),
      ]),
    ]),
  ],
})

The same style() function with css property declared within quotation marks works just fine inside the animation state:

      state(
        'selected',
        style({
          border: '2px solid blue',
          padding: '4px',
          'background-color': 'lightblue',
        })
      ),

Solution

  • As @Naveen stated - Documentation:

    Use the style() function to define a set of styles to associate with a given state name. You must use camelCase for style attributes that contain dashes, such as backgroundColor or wrap them in quotes, such as 'background-color'

    Updated:

    However, when you define a background-color property in the initial state it seems to recognize that in the transition -> styles. This is very inconsistent behavior. This does seem like a bug.

    https://stackblitz.com/edit/angular-ivy-e4xvwg?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts

    trigger('numberEnteredState', [
          state(
            'unselected',
            style({
              border: '1px solid black',
              padding: '5px',
              'background-color': 'white',
            })
          ),
          state(
            'selected',
            style({
              border: '2px solid blue',
              padding: '4px',
              'background-color': 'lightblue',
            })
          ),
          transition('unselected => selected', [
            style({
              border: '2px solid green',
              padding: '4px',
            }),
            animate('3000ms'),
            style({
              'background-color': 'red',
            }),
            state(
              'selected',
              style({
                border: '2px solid blue',
                padding: '4px',
                backgroundColor: 'lightblue',
              })
            ),
            animate('3000ms'),
          ]),
        ]),
      ],