-
Notifications
You must be signed in to change notification settings - Fork 1.5k
/
pagination-customization.html
36 lines (34 loc) · 1.3 KB
/
pagination-customization.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<p>A pagination with customized links:</p>
<ngb-pagination [collectionSize]="70" [(page)]="page" aria-label="Custom pagination">
<ng-template ngbPaginationPrevious>Prev</ng-template>
<ng-template ngbPaginationNext>Next</ng-template>
<ng-template ngbPaginationNumber let-p>{{ getPageSymbol(p) }}</ng-template>
</ngb-pagination>
<hr />
<p>A pagination with customized pages:</p>
<ngb-pagination [collectionSize]="70" [(page)]="page" [boundaryLinks]="true">
<ng-template ngbPaginationPages let-page let-pages="pages">
<li class="ngb-custom-pages-item" *ngIf="pages.length > 0">
<div class="mb-3 d-flex flex-nowrap px-2">
<label id="paginationInputLabel" for="paginationInput" class="col-form-label me-2 ms-1">Page</label>
<input
#i
type="text"
inputmode="numeric"
pattern="[0-9]*"
class="form-control custom-pages-input"
id="paginationInput"
[value]="page"
(keyup.enter)="selectPage(i.value)"
(blur)="selectPage(i.value)"
(input)="formatInput($any($event).target)"
aria-labelledby="paginationInputLabel paginationDescription"
style="width: 2.5rem"
/>
<span id="paginationDescription" class="col-form-label text-nowrap px-2"> of {{ pages.length }}</span>
</div>
</li>
</ng-template>
</ngb-pagination>
<hr />
<pre>Current page: {{ page }}</pre>