How to Display Monthly Attendance Report in Angular 6

Question

I want to display monthly attendance date wise in angular 6, something like this:

How to display attendance of employees datewise.

attendance.ts and attendance.html files are given below.

Attendance.ts

export class AttendanceSheetComponent implements OnInit {
  attendances: Attendance[];
  dates: string[];
  constructor(
    private attendanceservice: AttendanceService,
    private spinner: NgxSpinnerService
  ) {
    this.getAttendance();
  }
  getAttendance() {
    this.attendanceservice.get().subscribe(
      (res: Attendance[]) => {

        this.attendances = res;
        this.getDates(res);
        this.spinner.hide();
      },

    );
  }
  getDates(data) {
    this.dates = data.map(item => item.date)
      .filter((value, index, self) => self.indexOf(value) === index)
  }
}

Attendance.html

<thead>
  <tr>
    <th>#</th>
    <th>Name</th>
    <th *ngFor="let dates of dates" class="verticalTableHeader">
      <p>{{dates}}</p>
    </th>
  </tr>
</thead>
<tbody>
  <tr *ngFor="let attendance of attendances; let i = index">
    <td>
      {{ i + 1 }}
    </td>
    <td>
      {{attendance.firstname}} {{attendance.lastname}}
    </td>
    <td>
      {{attendance.title}}
    </td>
    <td>
      {{attendance.attendance}}
    </td>
  </tr>
</tbody>

Answer 1

Use a function within your ngFor and pas in the date value you're placing on the top of the heading , this will basically return the attendance for the date , also you have to make date and attendance as nested loops i.e for each value of date you need values of attendances.

.html

<tr *ngFor="let attendance of getAttendanceForDate('dates'); let i = index">

.ts

public getAttendanceForDate(date:any){
return this.attendance.filter(x => x.date === date);
}

for the css part of things just put

<th *ngFor="let dates of dates"><span class="bar">|</span></th>

use a dotted line just before the <tbody> and then again put another

<td><span class="bar">|</span></td> 

within the loop of attendance display.