Search code examples
angularjsangularangularjs-ng-class-evenangularjs-ng-class-odd

Implementing ngClassEven ngClassOdd for angular 2


I tried to implement ng-class-even and ng-class-odd ( from angular 1) type behaviour in angular 2 application.

I have written the code below and its working fine, I want to know if there is any other way of doing this.

HTML

<div *ngFor="#employee of employees; #index = index" [class.odd]="index%2==1" [class.even]="index%2==0" [class.selected]="employee === selectedEmployee"> 
      <p>{{employee.name}}</p>
         </div>

CSS

.odd {
    background-color: #f2f9ff;

}
.even {
    background-color: #eceff3;
}

Solution

  • OLD way

    DEMO : http://plnkr.co/edit/YkcudQipF1c8iT5LCRyd?p=preview

    <div *ngFor="#employee of employees; 
                 #index =index;
                 #isOdd=odd;
                 #isEven=even" 
    
         [class.odd]="isOdd" 
         [class.even]="isEven" 
         [class.selected]="employee === selectedEmployee"> 
         <p>{{employee.name}}</p>
    </div>
    


    New Way

    replace # by let(keyword)

    <div *ngFor="let employee of employees; 
                 let index =index;
                 let isOdd=odd;
                 let isEven=even" 
    
          [class.odd]="isOdd" 
          [class.even]="isEven" 
          [class.selected]="employee === selectedEmployee"> 
          <p>{{employee.name}}</p>
    
    </div>