Set table background color dynamically in angular2

1
votes

I have a dynamic table having the last column as clickable icon. When I click the icon, I show another table below that clicked icon's row. The functionality is working fine with my code. However, the rows are not having alternate color like css class 'table-striped' after I click on the icon. All the rows acquire same color after the click. What can I do to make the table row's css as 'table-striped'

<table class="table table-hover table-striped" *ngIf="datas && datas.length">
   <thead>
     <tr>
       <th>a</th>
       <th>b</th>
       <th>&nbsp;</th>
     </tr>
   </thead>
   <tbody>
      <ng-container *ngFor="let data of datas; let i = index">
      <tr>
         <td>{{data.Something1}}</td>
         <td>{{data.Something2}}</td>
         <td>
            <div (click)="onClick(i,data)"><span class="glyphicon"  [ngClass]="{'glyphicon-chevron-up': data.opendPanel , 'glyphicon-chevron-down': !data.opendPanel }"></span></div>
         </td>
      </tr>
      <tr *ngIf="lists && lists.length" [hidden]="!data.opendPanel">
         <td colspan="13">
           <div [hidden]="!data.opendPanel">
           <br /><p *ngIf="lists && lists.length" >Stores</p>
           <div>
            <table class="table table-hover table-striped" *ngIf="lists && lists.length">
                <thead>
                  <tr>
                     <th>aa</th>
                     <th>bb</th>
                  </tr>
                </thead>
                <tbody>
                   <tr *ngFor="let list of lists">
                       <td>{{aa.Name}}</td>
                       <td>{{bb.DCLocation}}</td>
                   </tr>
                </tbody>
             </table>
            </div>
           </div>
         </td>
       </tr>
     </ng-container>
   </tbody>

2
angular

2 Answers

1
votes

You can use NgFor even or odd context varibles:

<ng-container *ngFor="let data of datas; let i = index; let odd=odd">
  <div [class.is-odd]="odd">...</div>

the rest is just CSS matching the is-odd class.

0
votes

You can use Index to give different color based on odd even index. In you ngFro *ngFor="let list of lists" add this *ngFor="let list of lists"; let i = index;

and then just use ngClass like this 

[ngClass]="{'className': i = odd(), 'className':i = even()}"

You can built functions which return odd and even. like this

function isEven(n) {
   return n % 2 == 0;
}

function isOdd(n) {
   return Math.abs(n % 2) == 1;
}