CSS binding with $index when setting multiple classes

Question

With this binding

css: 'item' + $index()

I get this output

class="item0"
class="item1"
class="item2"
...

I'm not able to use this when binding multiple classes like below, a syntax error is thrown because : is expected instead of +. Any hints?

css: { 'item' + $index(), 'active': $index() == 0 }

A workaround is to use attribute binding, but if possible I'd like to avoid that because there are existing classes set already, so I'd have to include those in the binding.

attr: { 'class': 'slider-item item' + $index() + ($index() == 0 ? ' active' : '') }

Answer 1

You can also do the same string concatenation in the css binding:

css: 'item' + $index() + ($index() == 1 ? ' active' : '')

Demo JSFiddle.