Angular 2+ : Condition based on previous index date value ngIf NgFor

Question

Trying to format a table using Angular where:

If the day of the month changes, then you insert a new row which just contains the date (but also displays the data for that index value immediately below). If the day of the week is the same as before continue inserting the rows.

1) Clearly my code for accessing previous value in index is wrong but I can't seem to find anything clearly which helps.

2) I realise that my current code would compare the full datetime value and not just the day of the month (or week) but I am unsure how to do this in this scenario.

3) when the day changes and I try and insert the date line, I cannot get an additional new row formatted correctly which includes the data for that index value. I have tried playing around with various and combinations.

Please could someone help correct this code or point me in the right direction

Thanks

<table class="table-striped">
    <thead>
        <tr>
            <td>day</td>
            <td>time</td>
            <td>region</td>
            <td>event</td>
            <td>period</td>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let eco of eco_r ; let i = index"> 

        <template [ngIf]="eco.date != eco[i-1].date">
            <td colspan="5">{{eco.datetime| date:'longDate' }}</td>
          <tr>   
            <td>{{eco.datetime | date:'EE'}}</td>
            <td>{{eco.datetime | date:'shortTime'}}</td>
            <td>{{eco.region}}</td>
            <td>{{eco.event}}</td>
            <td>{{eco.period}}</td>
          </tr>
        </template>

        <template [ngIf]="eco.date == eco[i-1].date">
            <td>{{eco.datetime | date:'EE'}}</td>
            <td>{{eco.datetime | date:'shortTime'}}</td>
            <td>{{eco.region}}</td>
            <td>{{eco.event}}</td>
            <td>{{eco.period}}</td>
          </template>

        </tr>
    </tbody>
</table>

------------UPDATE ---------------

Following @Iancovici comments I have revised the following

i) corrected to reference eco_r[i-1].date

ii) Changed sql source to provide eco.day_of_month and eco.week_of_year to make it easier to reference and check conditions

iii) updated code to only check previous value when i > 0

I am still unable to get it to display a new line with the date AND also include the data for that value of i on a separate row where it formats correctly. Utilising as in my revised code puts all 5 values into the first column of the next row and messes put the table format. How should I resolve this please?

Thanks

  <template [ngIf]="i >0 && eco.day_of_month != eco_r[i-1].day_of_month">
        <tr><td colspan="5">{{eco.datetime| date:'longDate' }}</td>
        </tr>
            <tr> <td>{{eco.datetime | date:'EE'}}</td>
                 <td>{{eco.datetime | date:'shortTime'}}</td>
                 <td> {{eco.region}} </td>
                 <td>{{eco.event}}</td>
                 <td>{{eco.period}}</td>
            </tr>
         </template>

Answer 1

Should probbly be *ngIf not [ngIf] in general. But I see in your case it's ok because you're using an ng template which means instead of directive *ngIf it's not a bonded property [ngIf]

Also you're accesing the same instance, should access index of array instead so.. change from

*ngIf="eco.date == eco[i-1].date">

to

*ngIf="eco.date == eco_r[i-1].date">

Update: Two more notes

• Make sure you create a table, with tag
• Don't be afraid to use paranthesis if conditonal expressions become more complex, so you can distinguish the two conditions.

Try this without the filters, then integrate the filters in.

<table>
  <div *ngFor="let eco of eco_r; let i = index">
    <div *ngIf="(i > 0) && (eco.day_of_month != eco_r[i-1].day_of_month)">
      <tr>
        <td colspan="5">{{eco.datetime }}</td>
      </tr>
      <tr>
        <td>{{eco.datetime }}</td>
        <td>{{eco.datetime }}</td>
        <td> {{eco.region}} </td>
        <td>{{eco.event}}</td>
        <td>{{eco.period}}</td>
      </tr>
    </div>
  </div>
</table>