CODEWITHSUNDEEP
angularngfor
VIK6Galado
VIK6Galado

Reputation: 680

How to recognize *ngFor index in td in angular4?

I have an array of dates to loop through which consist of all dates of 4 weeks as shown below:

          <table boder="1">
            <tr>
              <td>First Spot</td>
              <td *ngFor="let date of datesFullArray; let i = index;" class="nopadd" [class.no-border]="i+1 % 7 == 0">
                <div *ngFor="let gs of firstSpot">
                  <span [ngClass]="{
                                'available':checkDate(gs.fromDate, gs.toDate, date) === 1,
                                'not-available':checkDate(gs.fromDate, gs.toDate, date) === 0
                              }">
                    &nbsp;
                  </span>
                </div>
              </td>

            </tr>
          </table>

Here, i want to split the <td> i.e. when it reaches 1st, 2nd, 3rd weeks i want to apply no-border class which makes border as none.

I am trying to take the index value to do the same but not working..

Any help highly appreciated..

Upvotes: 0

Views: 430

Answers (1)

Abinesh Joyel
Abinesh Joyel

Reputation: 2093

To remove the border of td tag

using style binding

[style.border]="((i+1) % 7) == 0 && 'none'">

or class

[class.no-border]="((i+1) % 7) == 0">

demo stackblitz

Upvotes: 1

Related Questions