File
Extends
Index
Properties
|
|
|
Inputs
|
|
|
HostBindings
|
|
|
Accessors
|
|
|
|
hideTotalCount
|
Type : boolean
|
Default value : false
|
|
|
Whether to show total count in custom paginator
|
HostBindings
|
class
|
Type : string
|
Default value : 'mat-paginator'
|
|
|
|
Public
Optional
_formFieldAppearance
|
Type : MatFormFieldAppearance
|
|
|
|
hostClass
|
Type : string
|
Default value : 'mat-paginator'
|
Decorators :
@HostBinding('class')
|
|
|
Accessors
|
totalCount
|
gettotalCount()
|
|
|
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
HostBinding,
Inject,
Injectable,
Input,
Optional,
ViewEncapsulation,
} from '@angular/core';
import { MatFormFieldAppearance } from '@angular/material/form-field';
import {
MatPaginatorDefaultOptions,
MatPaginatorIntl,
MAT_PAGINATOR_DEFAULT_OPTIONS,
_MatPaginatorBase,
} from '@angular/material/paginator';
@Injectable()
export class UiMatPaginatorIntl extends MatPaginatorIntl {
getPageLabel(currentPage: number, pageCount?: number): string {
if (!pageCount) {
return `Page ${currentPage}`;
}
return `Page ${currentPage} / ${pageCount}`;
}
}
@Component({
selector: 'ui-grid-custom-paginator',
templateUrl: './ui-grid-custom-paginator.component.html',
styleUrls: ['./ui-grid-custom-paginator.component.scss'],
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
inputs: ['disabled'],
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
})
export class UiGridCustomPaginatorComponent extends _MatPaginatorBase<MatPaginatorDefaultOptions> {
// eslint-disable-next-line
public _formFieldAppearance?: MatFormFieldAppearance;
// eslint-disable-next-line
public _intl!: UiMatPaginatorIntl;
/**
* Whether to show total count in custom paginator
*
*/
@Input()
hideTotalCount = false;
@HostBinding('class')
hostClass = 'mat-paginator';
get pageCount(): number {
return Math.ceil(this.length / this.pageSize);
}
get totalCount(): number {
return Math.min(this.length, (this.pageIndex + 1) * this.pageSize);
}
constructor(
changeDetectorRef: ChangeDetectorRef,
@Optional()
intl?: UiMatPaginatorIntl,
@Optional()
@Inject(MAT_PAGINATOR_DEFAULT_OPTIONS)
defaults?: MatPaginatorDefaultOptions,
) {
super(intl ?? new UiMatPaginatorIntl(), changeDetectorRef, defaults);
if (defaults?.formFieldAppearance != null) {
this._formFieldAppearance = defaults.formFieldAppearance;
}
}
}
<div class="mat-paginator-outer-container">
<div class="mat-paginator-container">
<div class="mat-paginator-range-label">
<ng-container *ngIf="!hideTotalCount">
{{_intl.getRangeLabel(pageIndex, pageSize, length)}}
</ng-container>
<ng-container *ngIf="hideTotalCount">
{{ (pageIndex * pageSize + 1) + ' - ' + totalCount }}
</ng-container>
</div>
<div class="mat-paginator-range-actions">
<button *ngIf="showFirstLastButtons"
[attr.aria-label]="_intl.firstPageLabel"
[matTooltip]="_intl.firstPageLabel"
[matTooltipDisabled]="_previousButtonsDisabled()"
[matTooltipPosition]="'above'"
[disabled]="_previousButtonsDisabled()"
(click)="firstPage()"
mat-icon-button
type="button"
class="mat-paginator-navigation-first">
<svg class="mat-paginator-icon"
viewBox="0 0 24 24"
focusable="false">
<path d="M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z" />
</svg>
</button>
<button [attr.aria-label]="_intl.previousPageLabel"
[matTooltip]="_intl.previousPageLabel"
[matTooltipDisabled]="_previousButtonsDisabled()"
[matTooltipPosition]="'above'"
[disabled]="_previousButtonsDisabled()"
(click)="previousPage()"
mat-icon-button
type="button"
class="mat-paginator-navigation-previous">
<svg class="mat-paginator-icon"
viewBox="0 0 24 24"
focusable="false">
<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
</svg>
</button>
<div class="mat-paginator-page-label">
<ng-container *ngIf="!hideTotalCount">
{{_intl.getPageLabel(pageIndex+1, pageCount)}}
</ng-container>
<ng-container *ngIf="hideTotalCount">
{{ pageIndex + 1 }}
</ng-container>
</div>
<button [attr.aria-label]="_intl.nextPageLabel"
[matTooltip]="_intl.nextPageLabel"
[matTooltipDisabled]="_nextButtonsDisabled()"
[matTooltipPosition]="'above'"
[disabled]="_nextButtonsDisabled()"
(click)="nextPage()"
mat-icon-button
type="button"
class="mat-paginator-navigation-next">
<svg class="mat-paginator-icon"
viewBox="0 0 24 24"
focusable="false">
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
</svg>
</button>
<button *ngIf="showFirstLastButtons"
[attr.aria-label]="_intl.lastPageLabel"
[matTooltip]="_intl.lastPageLabel"
[matTooltipDisabled]="_nextButtonsDisabled()"
[matTooltipPosition]="'above'"
[disabled]="_nextButtonsDisabled()"
(click)="lastPage()"
mat-icon-button
type="button"
class="mat-paginator-navigation-last">
<svg class="mat-paginator-icon"
viewBox="0 0 24 24"
focusable="false">
<path d="M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z" />
</svg>
</button>
</div>
<div *ngIf="!hidePageSize"
class="mat-paginator-page-size">
<div class="mat-paginator-page-size-label">
{{_intl.itemsPerPageLabel}}
</div>
<mat-form-field *ngIf="_displayedPageSizeOptions.length > 1"
[appearance]="_formFieldAppearance!"
[color]="color"
class="mat-paginator-page-size-select">
<mat-select (selectionChange)="_changePageSize($event.value)"
[value]="pageSize"
[disabled]="disabled"
[aria-label]="_intl.itemsPerPageLabel">
<mat-option *ngFor="let pageSizeOption of _displayedPageSizeOptions"
[value]="pageSizeOption">
{{ pageSizeOption }}
</mat-option>
</mat-select>
</mat-form-field>
<div *ngIf="_displayedPageSizeOptions.length <= 1"
class="mat-paginator-page-size-value">{{pageSize}}</div>
</div>
</div>
</div>
$mat-paginator-padding: 0 8px;
$mat-paginator-page-size-margin-right: 8px;
$mat-paginator-range-label-margin-right: 8px;
$mat-paginator-items-per-page-label-margin: 0 4px;
$mat-paginator-selector-margin: 6px 4px 0 4px;
$mat-paginator-selector-trigger-width: 56px;
$mat-paginator-selector-trigger-outline-width: 64px;
$mat-paginator-selector-trigger-fill-width: 64px;
$mat-paginator-page-label-margin: 0 32px 0 24px;
$mat-paginator-button-icon-size: 14px;
$mat-paginator-button-size: 32px;
ui-grid-custom-paginator {
.mat-icon-button {
width: $mat-paginator-button-size;
height: $mat-paginator-button-size;
line-height: unset;
}
.mat-paginator {
display: block;
}
// Note: this wrapper element is only used to get the flexbox vertical centering to work
// with the `min-height` on IE11. It can be removed if we drop support for IE.
.mat-paginator-outer-container {
display: flex;
font-size: 14px;
}
.mat-paginator-container {
display: flex;
align-items: center;
justify-content: space-between;
padding: $mat-paginator-padding;
flex-wrap: wrap-reverse;
width: 100%;
}
.mat-paginator-page-size {
display: flex;
align-items: baseline;
margin-right: $mat-paginator-page-size-margin-right;
margin [dir="rtl"] & {
margin-right: 0;
margin-left: $mat-paginator-page-size-margin-right;
}
}
.mat-paginator-page-size-label {
margin: $mat-paginator-items-per-page-label-margin;
}
.mat-paginator-page-size-select {
margin: $mat-paginator-selector-margin;
width: $mat-paginator-selector-trigger-width;
&.mat-form-field-appearance-outline {
width: $mat-paginator-selector-trigger-outline-width;
}
&.mat-form-field-appearance-fill {
width: $mat-paginator-selector-trigger-fill-width;
}
}
.mat-paginator-range-actions .mat-paginator-page-label {
margin: $mat-paginator-page-label-margin;
min-width: 7em;
text-align: center;
}
.mat-paginator-range-label {
margin-left: $mat-paginator-range-label-margin-right;
min-width: 7em;
}
.mat-paginator-range-actions {
display: flex;
align-items: center;
}
.mat-paginator-icon {
width: $mat-paginator-button-icon-size;
height: $mat-paginator-button-icon-size;
fill: currentColor;
[dir="rtl"] & {
transform: rotate(180deg);
}
}
}
Legend
Html element with directive