File

src/app/components/cursor-paginator/cursor-paginator.component.ts

Description

This component controls the cursor in a DataList using arrows and a page size selector.

Metadata

selector app-cursor-paginator
styleUrls ./cursor-paginator.component.scss
templateUrl ./cursor-paginator.component.html

Index

Inputs

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;
    }
  }
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""