0

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

i want to disaplay monthly attendance date wise in angular 6

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>
SiddAjmera
  • 38,129
  • 5
  • 72
  • 110
Sruthi
  • 23
  • 1
  • 5
  • within your attendance model do you have some dort of mapping property for date? – Vaibhav Nov 23 '18 at 06:43
  • @VaibhavKumarGoyal current date is inserted as date in table – Sruthi Nov 23 '18 at 06:47
  • what i meant was since you want to show attendance according to the month that means your attendance model should have a date property which can help you determining the month of the attendance taken , is that sort of property available? – Vaibhav Nov 23 '18 at 06:50
  • @VaibhavKumarGoyal yup date field is there. – Sruthi Nov 23 '18 at 06:52
  • Please add some sample data to work with. It would be great if you could provide a [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve). You can use [StackBlitz](https://stackblitz.com/fork/angular) to create one. – SiddAjmera Nov 23 '18 at 07:19

1 Answers1

0

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.

Vaibhav
  • 1,481
  • 13
  • 17
  • thanks for your reply..but i actually want to know how to display attendance like that in above image – Sruthi Nov 23 '18 at 07:11
  • @Sruthi updated the answer to include some style hack you can use to display the table. – Vaibhav Nov 23 '18 at 09:23