Style binding

Let's see how we can use style binding to set different background colors for even/odd rows in the headline. As we saw before, the *ngFor directive provides other variables such as "even" and "odd", which we can benefit from them here.

Tip

Please keep in mind you can always use CSS3 n^th-child to achieve the same effect.

To achieve this stripped effect, simply modify the template as follows:

# app/collector/collector.html 
<div [class.container]="isContainer"> 
  <div class="row"> 
    <h4>{{caption}}</h4> 
  </div> 
  <div class="row"> 
    <ul class="list-unstyled"> 
      <li *ngFor="let headline of headlines; let i=index; let o=odd;"> 
        <div class="row" [style.backgroundColor]="o ? 'Khaki':'ivory'"> 
        <input type="checkbox">{{i+1}} - {{headline}} 
        </div> 
      </li> 
    </ul> 
  </div> 
</div> 

First we defined a local variable o and assigned it to the odd variable...