Angular Services

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> ...