Skip to content

Instantly share code, notes, and snippets.

@bentedder
Last active July 16, 2019 17:07
Show Gist options
  • Save bentedder/825016fc5038d118580c4f4ae4c346b5 to your computer and use it in GitHub Desktop.
Save bentedder/825016fc5038d118580c4f4ae4c346b5 to your computer and use it in GitHub Desktop.
Pagination Component
<div>list of things</div>
<my-pagination
(goPage)="goToPage($event)"
(goNext)="onNext()"
(goPrev)="onPrev()"
[pagesToShow]="3"
[page]="page"
[perPage]="limit"
[count]="total"></my-pagination>
import { Component, OnInit } from '@angular/core';
import { MessageService } from './message.service';
@Component({
selector: 'my-message-list',
templateUrl: './message-list.component.html',
styleUrls: ['./message-list.component.scss']
})
export class MessageListComponent implements OnInit {
messages: Message[];
loading = false;
total = 0;
page = 1;
limit = 20;
constructor(private messageService: MessageService) {
}
ngOnInit(): void {
this.getMessages();
}
getMessages(): void {
this.loading = true;
this.messageService.getMessages({ page: this.page, limit: this.limit }).subscribe(res => {
this.total = res.total;
this.messages = res.messages;
this.loading = false;
});
}
goToPage(n: number): void {
this.page = n;
this.getMessages();
}
onNext(): void {
this.page++;
this.getMessages();
}
onPrev(): void {
this.page--;
this.getMessages();
}
}
<div class="pagination" *ngIf="count > 0">
<div class="description">
<span class="page-counts">{{ getMin() }} - {{ getMax() }} of {{ count }}</span>
<span class="page-totals">{{ totalPages() }} pages</span>
</div>
<div class="numbers">
<button class="link" (click)="onPrev()" [disabled]="page === 1 || loading" [ngClass]="{ 'disabled': page === 1 || loading }">&lt; Previous</button>
<button
*ngFor="let pageNum of getPages()"
(click)="onPage(pageNum)"
[ngClass]="{'active': pageNum === page, 'disabled': loading}">{{ pageNum }}</button>
<button class="link" (click)="onNext(true)" [disabled]="lastPage() || loading" [ngClass]="{ 'disabled': lastPage() || loading }">Next &gt;</button>
</div>
</div>
// fix these imports to match your imports
@import '~vars';
@import '~typography';
:host {
flex: 0 0 30px;
display: flex;
.pagination {
width: 100%;
position: relative;
flex: 1;
background: $grey50;
display: flex;
flex-direction: row;
align-items: center;
.description {
position: absolute;
top: 50%;
transform: translate(0, -50%);
left: $base;
.page-counts {
margin-right: $base * 2;
}
}
.numbers {
display: block;
text-align: center;
flex: 1;
button {
flex: 0 0 auto;
outline: none;
border: 0;
padding: 0 ($base / 2);
background: transparent;
cursor: pointer;
&.active {
@extend .h6;
}
&.disabled {
@extend .link-disabled;
color: $lightgrey;
}
}
}
}
}
import { Component, Input, EventEmitter, Output } from '@angular/core';
@Component({
selector: 'my-pagination',
templateUrl: './pagination.component.html',
styleUrls: ['./pagination.component.scss']
})
export class PaginationComponent {
@Input() page: number;
@Input() count: number;
@Input() perPage: number;
@Input() loading: boolean;
@Input() pagesToShow: number;
@Output() goPrev = new EventEmitter<boolean>();
@Output() goNext = new EventEmitter<boolean>();
@Output() goPage = new EventEmitter<number>();
constructor() { }
getMin(): number {
return ((this.perPage * this.page) - this.perPage) + 1;
}
getMax(): number {
let max = this.perPage * this.page;
if (max > this.count) {
max = this.count;
}
return max;
}
onPage(n: number): void {
this.goPage.emit(n);
}
onPrev(): void {
this.goPrev.emit(true);
}
onNext(next: boolean): void {
this.goNext.emit(next);
}
totalPages(): number {
return Math.ceil(this.count / this.perPage) || 0;
}
lastPage(): boolean {
return this.perPage * this.page > this.count;
}
getPages(): number[] {
const c = Math.ceil(this.count / this.perPage);
const p = this.page || 1;
const pagesToShow = this.pagesToShow || 9;
const pages: number[] = [];
pages.push(p);
const times = pagesToShow - 1;
for (let i = 0; i < times; i++) {
if (pages.length < pagesToShow) {
if (Math.min.apply(null, pages) > 1) {
pages.push(Math.min.apply(null, pages) - 1);
}
}
if (pages.length < pagesToShow) {
if (Math.max.apply(null, pages) < c) {
pages.push(Math.max.apply(null, pages) + 1);
}
}
}
pages.sort((a, b) => a - b);
return pages;
}
}
@miyarin-tn
Copy link

import { MessageService } from './message.service';
messages: Message[];

how to define message service file???
thanks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment