How to style one of the li that generate with repeat.for in aurelia? - sass

Question

<ul>
<li repeat.for="row of router.navigation" > ${row.title}
</li>
</ul>
infact i want to style one of the router button that generate with repeat.for method
want to make left border radius for navigation bar like the right of the navigation bar

Answer 1

As a one-liner option, you could bind your class attribute with ...
<li repeat.for="row of router.navigation" class="${myBool ? 'a-class' : 'another-class'}">${row.title}</li>
You can bind class with string interpolation or with .bind syntax. See https://aurelia.io/docs/binding/class-and-style#class
UPDATE: Sorry...should have read your other comment further down. If it's just for the first , why not just use CSS?
#myUl>li:first-child{
   // my CSS here
}​

Answer 2

You can identify the first repeated element with the $index context variable.
This would lead to something like this:
<ul>
<li repeat.for="row of router.navigation" >
<a if.bind="$index === 0" class="blah"> ${row.title} </a>
<a else class="another class"> ${row.title} </a>
</li>
</ul>
If you need to do the styling on the <li> tag, the solution could be like this:
<ul>
<template repeat.for="row of router.navigation" >
<li if.bind="$index === 0" class="blah"> ${row.title} </li>
<li else class="another class"> ${row.title} </li>
</template>
</ul>