src/app/components/cursor-paginator/cursor-paginator.component.ts
This component controls the cursor in a DataList using arrows and a page size selector.
| selector | app-cursor-paginator |
| styleUrls | ./cursor-paginator.component.scss |
| templateUrl | ./cursor-paginator.component.html |
Inputs |
| list | |
Type : DataList< | >
|
|
|
The DataList that will be controlled. |
|
| pageSizes | |
Type : number[]
|
|
|
Available page sizes; e.g. [10, 25, 100] |
|
import {Component, Input} from '@angular/core';
import {DataList} from '@app/data-dgql/query';
/**
* This component controls the cursor in a {@link DataList} using arrows and a page size selector.
*/
@Component({
selector: 'app-cursor-paginator',
templateUrl: './cursor-paginator.component.html',
styleUrls: ['./cursor-paginator.component.scss']
})
export class CursorPaginatorComponent {
/** The DataList that will be controlled. */
@Input() list: DataList<unknown, unknown>;
/** Available page sizes; e.g. [10, 25, 100] */
@Input() pageSizes: number[];
}
<div class="cursor-paginator">
<div class="page-size-control" *ngIf="this.pageSizes?.length > 1">
<span class="page-size-label">Items per page:</span>
<mat-form-field class="page-size-select">
<mat-select [(value)]="this.list.count" (valueChange)="this.list.firstPage()">
<mat-option *ngFor="let size of this.pageSizes" [value]="size"> {{ size }} </mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="pagination-buttons">
<button mat-icon-button (click)="this.list.firstPage()">
<mat-icon>first_page</mat-icon>
</button>
<button mat-icon-button [disabled]="!this.list.hasPrevPage" (click)="this.list.prevPage()">
<mat-icon>chevron_left</mat-icon>
</button>
<button mat-icon-button [disabled]="!this.list.hasNextPage" (click)="this.list.nextPage()">
<mat-icon>chevron_right</mat-icon>
</button>
</div>
</div>
./cursor-paginator.component.scss
.cursor-paginator {
display: flex;
justify-content: flex-end;
color: fade-in(black, 0.54);
padding: 8px 16px;
.page-size-control {
margin-right: 16px;
.page-size-label {
margin-right: 8px;
font-size: 12px;
}
.page-size-select {
width: 64px;
}
}
}