packages/ui/src/lib/list/pagination/pagination.component.ts
The Pagination component renders a given instance of the Pagination class.
| selector | ec-pagination |
| templateUrl | ./pagination.component.html |
Properties |
|
Methods |
Inputs |
| config | |
Type : PaginationConfig
|
|
|
The config that is used |
|
| pagination | |
Type : Pagination<T>
|
|
|
A Pagination Instance |
|
| isVisible | ||||
isVisible(page)
|
||||
|
Determines if a page should be visible
Parameters :
Returns :
boolean
|
| ngOnChanges |
ngOnChanges()
|
|
As soon as the pagination is known, the change$ event is subscribed to translate the container on change.
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Init config.
Returns :
void
|
| updateSize | ||||||
updateSize(value: string)
|
||||||
|
Parameters :
Returns :
void
|
| Private container |
Type : ElementRef
|
Decorators :
@ViewChild('container')
|
|
The div container for the pages |
| Private page |
Type : QueryList<ElementRef>
|
Decorators :
@ViewChildren('page')
|
|
The pages li elements. The first one is used to determine the container translation. |
| Private pageContainer |
Type : ElementRef
|
Decorators :
@ViewChild('pageContainer')
|
|
The ul around pages |
TODO
import { Component, ElementRef, Input, OnInit, QueryList, ViewChild, ViewChildren } from '@angular/core';
import { OnChanges } from '@angular/core';
import { Pagination } from '@ec.components/core';
import { PaginationConfig } from './pagination-config.interface';
/**
* The Pagination component renders a given instance of the Pagination class.
*/
@Component({
selector: 'ec-pagination',
templateUrl: './pagination.component.html',
})
export class PaginationComponent<T> implements OnChanges, OnInit {
/** A Pagination Instance */
@Input() pagination: Pagination<T>;
/** The div container for the pages*/
@ViewChild('container') private container: ElementRef;
/** The ul around pages */
@ViewChild('pageContainer') private pageContainer: ElementRef;
/** The pages li elements. The first one is used to determine the container translation. */
@ViewChildren('page') private page: QueryList<ElementRef>;
/** The config that is used */
@Input() config: PaginationConfig;
/** Init config. */
ngOnInit() {
this.config = new PaginationConfig(this.config);
}
/** As soon as the pagination is known, the change$ event is subscribed to translate the container on change.*/
ngOnChanges() {
if (!this.pagination) {
return;
}
this.config = new PaginationConfig(this.config);
}
/** Determines if a page should be visible */
isVisible(page) {
const current = this.pagination.getPage();
return (
Math.abs(current - page) <
this.config.range +
1 +
Math.max(0, this.config.range - current + 1) +
Math.max(0, current - this.pagination.getPages() + this.config.range)
);
}
updateSize(value: string) {
if (!value) {
return;
}
// tslint:disable-next-line:radix
this.pagination.updateSize(parseInt(value));
}
}
<nav class="ec-pagination">
<ul class="ec-pagination-controls" *ngIf="pagination?.getPages()>1&&!pagination?.isFirst()">
<li class="ec-pagination-control ec-pagination-control_first" [class.is-disabled]="pagination?.isFirst()" [hidden]="config.hideFirstLast">
<a (click)="pagination.first()" class="ec-pagination__item">
<span>{{'pagination.first' | symbol}}</span>
</a>
</li>
<li class="ec-pagination-control ec-pagination-control_prev" *ngIf="!pagination?.isFirst()">
<a (click)="pagination.prev()" class="ec-pagination__item">
<span>{{'pagination.prev' | symbol}}</span>
</a>
</li>
</ul>
<div #container class="ec-pagination-pages" [hidden]="config?.hidePages" *ngIf="pagination?.getPages()>1">
<ul #pageContainer *ngIf="pagination?.pages">
<li *ngFor="let page of pagination.pages;let i = index" #page [hidden]="!isVisible(i+1)">
<a (click)="pagination.select(i+1)" [class.is-active]="pagination.isActive(i+1)" class="ec-pagination__item">
<span>{{i+1}}</span>
</a>
</li>
</ul>
</div>
<ul class="ec-pagination-controls" *ngIf="pagination?.getPages()>1&&!pagination?.isLast()">
<li class="ec-pagination-control ec-pagination-control_next" [class.is-disabled]="pagination?.isLast()">
<a (click)="pagination.next()" class="ec-pagination__item">
<span>{{'pagination.next' | symbol}}</span>
</a>
</li>
<li class="ec-pagination-control ec-pagination-control_last" *ngIf="!pagination?.isLast()" [hidden]="config.hideFirstLast">
<a (click)="pagination.last()" class="ec-pagination__item">
<span>{{'pagination.last' | symbol}}</span>
</a>
</li>
</ul>
<div class="ec-pagination-info" *ngIf="pagination?.params()?.total">
<span>{{pagination?.params()?.from}}-{{pagination?.params()?.to}} {{ 'pagination.of' | symbol}} {{pagination?.params()?.total}}</span>
</div>
<div class="ec-pagination-size-select" *ngIf="pagination?.params()?.total">
<select *ngIf="pagination?.params()?.availableSizes?.length > 1" (change)="updateSize($event.target.value)" class="input input_small">
<option *ngFor="let size of pagination?.params()?.availableSizes" [value]="size" [attr.selected]="pagination.params().size===size?'selected':null">
{{size}} {{'pagination.size' | symbol}}
</option>
</select>
</div>
</nav>