How to Display Monthly Attendance Report in Angular 6
0
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>
angular time-and-attendance edited Nov 23 '18 at 6:45
SiddAjmera
16k31239
asked Nov 23 '18 at 6:38
SruthiSruthi
32
add a comment |
0
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>
edited Nov 23 '18 at 6:45
SiddAjmera
16k31239
asked Nov 23 '18 at 6:38
SruthiSruthi
32
within your attendance model do you have some dort of mapping property for date?
– Vaibhav Kumar Goyal
Nov 23 '18 at 6:43
@VaibhavKumarGoyal current date is inserted as date in table
– Sruthi
Nov 23 '18 at 6: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 Kumar Goyal
Nov 23 '18 at 6:50
@VaibhavKumarGoyal yup date field is there.
– Sruthi
Nov 23 '18 at 6:52
Please add some sample data to work with. It would be great if you could provide a Minimal, Complete, and Verifiable example. You can use StackBlitz to create one.
– SiddAjmera
Nov 23 '18 at 7:19
add a comment |
0
0
0
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>
edited Nov 23 '18 at 6:45
SiddAjmera
16k31239
asked Nov 23 '18 at 6:38
SruthiSruthi
32
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>
edited Nov 23 '18 at 6:45
SiddAjmera
16k31239
asked Nov 23 '18 at 6:38
SruthiSruthi
32
edited Nov 23 '18 at 6:45
SiddAjmera
16k31239
asked Nov 23 '18 at 6:38
SruthiSruthi
32
edited Nov 23 '18 at 6:45
SiddAjmera
16k31239
edited Nov 23 '18 at 6:45
SiddAjmera
16k31239
edited Nov 23 '18 at 6:45
SiddAjmera
16k31239
16k31239
asked Nov 23 '18 at 6:38
SruthiSruthi
32
asked Nov 23 '18 at 6:38
SruthiSruthi
32
asked Nov 23 '18 at 6:38
SruthiSruthi
32
32
within your attendance model do you have some dort of mapping property for date?
– Vaibhav Kumar Goyal
Nov 23 '18 at 6:43
@VaibhavKumarGoyal current date is inserted as date in table
– Sruthi
Nov 23 '18 at 6: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 Kumar Goyal
Nov 23 '18 at 6:50
@VaibhavKumarGoyal yup date field is there.
– Sruthi
Nov 23 '18 at 6:52
Please add some sample data to work with. It would be great if you could provide a Minimal, Complete, and Verifiable example. You can use StackBlitz to create one.
– SiddAjmera
Nov 23 '18 at 7:19
add a comment |
within your attendance model do you have some dort of mapping property for date?
– Vaibhav Kumar Goyal
Nov 23 '18 at 6:43
@VaibhavKumarGoyal current date is inserted as date in table
– Sruthi
Nov 23 '18 at 6: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 Kumar Goyal
Nov 23 '18 at 6:50
@VaibhavKumarGoyal yup date field is there.
– Sruthi
Nov 23 '18 at 6:52
Please add some sample data to work with. It would be great if you could provide a Minimal, Complete, and Verifiable example. You can use StackBlitz to create one.
– SiddAjmera
Nov 23 '18 at 7:19
within your attendance model do you have some dort of mapping property for date?
– Vaibhav Kumar Goyal
Nov 23 '18 at 6:43
within your attendance model do you have some dort of mapping property for date?
– Vaibhav Kumar Goyal
Nov 23 '18 at 6:43
@VaibhavKumarGoyal current date is inserted as date in table
– Sruthi
Nov 23 '18 at 6:47
@VaibhavKumarGoyal current date is inserted as date in table
– Sruthi
Nov 23 '18 at 6: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 Kumar Goyal
Nov 23 '18 at 6:50
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 Kumar Goyal
Nov 23 '18 at 6:50
@VaibhavKumarGoyal yup date field is there.
– Sruthi
Nov 23 '18 at 6:52
@VaibhavKumarGoyal yup date field is there.
– Sruthi
Nov 23 '18 at 6:52
Please add some sample data to work with. It would be great if you could provide a Minimal, Complete, and Verifiable example. You can use StackBlitz to create one.
– SiddAjmera
Nov 23 '18 at 7:19
Please add some sample data to work with. It would be great if you could provide a Minimal, Complete, and Verifiable example. You can use StackBlitz to create one.
– SiddAjmera
Nov 23 '18 at 7:19
add a comment |
1 Answer
1
active
oldest
votes
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.
answered Nov 23 '18 at 6:59
Vaibhav Kumar GoyalVaibhav Kumar Goyal
674613
thanks for your reply..but i actually want to know how to display attendance like that in above image
– Sruthi
Nov 23 '18 at 7:11
@Sruthi updated the answer to include some style hack you can use to display the table.
– Vaibhav Kumar Goyal
Nov 23 '18 at 9:23
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53441713%2fhow-to-display-monthly-attendance-report-in-angular-6%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
answered Nov 23 '18 at 6:59
Vaibhav Kumar GoyalVaibhav Kumar Goyal
674613
thanks for your reply..but i actually want to know how to display attendance like that in above image
– Sruthi
Nov 23 '18 at 7:11
@Sruthi updated the answer to include some style hack you can use to display the table.
– Vaibhav Kumar Goyal
Nov 23 '18 at 9:23
add a comment |
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.
answered Nov 23 '18 at 6:59
Vaibhav Kumar GoyalVaibhav Kumar Goyal
674613
thanks for your reply..but i actually want to know how to display attendance like that in above image
– Sruthi
Nov 23 '18 at 7:11
@Sruthi updated the answer to include some style hack you can use to display the table.
– Vaibhav Kumar Goyal
Nov 23 '18 at 9:23
add a comment |
0
0
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.
answered Nov 23 '18 at 6:59
Vaibhav Kumar GoyalVaibhav Kumar Goyal
674613
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.
answered Nov 23 '18 at 6:59
Vaibhav Kumar GoyalVaibhav Kumar Goyal
674613
edited Nov 23 '18 at 9:23
answered Nov 23 '18 at 6:59
Vaibhav Kumar GoyalVaibhav Kumar Goyal
674613
answered Nov 23 '18 at 6:59
Vaibhav Kumar GoyalVaibhav Kumar Goyal
674613
answered Nov 23 '18 at 6:59
Vaibhav Kumar GoyalVaibhav Kumar Goyal
674613
674613
thanks for your reply..but i actually want to know how to display attendance like that in above image
– Sruthi
Nov 23 '18 at 7:11
@Sruthi updated the answer to include some style hack you can use to display the table.
– Vaibhav Kumar Goyal
Nov 23 '18 at 9:23
add a comment |
thanks for your reply..but i actually want to know how to display attendance like that in above image
– Sruthi
Nov 23 '18 at 7:11
@Sruthi updated the answer to include some style hack you can use to display the table.
– Vaibhav Kumar Goyal
Nov 23 '18 at 9:23
thanks for your reply..but i actually want to know how to display attendance like that in above image
– Sruthi
Nov 23 '18 at 7:11
thanks for your reply..but i actually want to know how to display attendance like that in above image
– Sruthi
Nov 23 '18 at 7:11
@Sruthi updated the answer to include some style hack you can use to display the table.
– Vaibhav Kumar Goyal
Nov 23 '18 at 9:23
@Sruthi updated the answer to include some style hack you can use to display the table.
– Vaibhav Kumar Goyal
Nov 23 '18 at 9:23
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53441713%2fhow-to-display-monthly-attendance-report-in-angular-6%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
within your attendance model do you have some dort of mapping property for date?
– Vaibhav Kumar Goyal
Nov 23 '18 at 6:43
@VaibhavKumarGoyal current date is inserted as date in table
– Sruthi
Nov 23 '18 at 6: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 Kumar Goyal
Nov 23 '18 at 6:50
@VaibhavKumarGoyal yup date field is there.
– Sruthi
Nov 23 '18 at 6:52
Please add some sample data to work with. It would be great if you could provide a Minimal, Complete, and Verifiable example. You can use StackBlitz to create one.
– SiddAjmera
Nov 23 '18 at 7:19