primeng
Version:
[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primeng) [\">\n <div class=\"p-paginator-left-content\" *ngIf=\"templateLeft\">\n <ng-container *ngTemplateOutlet=\"templateLeft; context: {$implicit: paginatorState}\"></ng-container>\n </div>\n <span class=\"p-paginator-current\" *ngIf=\"showCurrentPageReport\">{{currentPageReport}}</span>\n <button *ngIf=\"showFirstLastIcon\" type=\"button\" [disabled]=\"isFirstPage()\" (click)=\"changePageToFirst($event)\" pRipple\n class=\"p-paginator-first p-paginator-element p-link\" [ngClass]=\"{'p-disabled':isFirstPage()}\">\n <span class=\"p-paginator-icon pi pi-angle-double-left\"></span>\n </button>\n <button type=\"button\" [disabled]=\"isFirstPage()\" (click)=\"changePageToPrev($event)\" pRipple\n class=\"p-paginator-prev p-paginator-element p-link\" [ngClass]=\"{'p-disabled':isFirstPage()}\">\n <span class=\"p-paginator-icon pi pi-angle-left\"></span>\n </button>\n <span class=\"p-paginator-pages\" *ngIf=\"showPageLinks\">\n <button type=\"button\" *ngFor=\"let pageLink of pageLinks\" class=\"p-paginator-page p-paginator-element p-link\" [ngClass]=\"{'p-highlight': (pageLink-1 == getPage())}\"\n (click)=\"onPageLinkClick($event, pageLink - 1)\" pRipple>{{pageLink}}</button>\n </span>\n <p-dropdown [options]=\"pageItems\" [ngModel]=\"getPage()\" *ngIf=\"showJumpToPageDropdown\" styleClass=\"p-paginator-page-options\"\n (onChange)=\"onPageDropdownChange($event)\" [appendTo]=\"dropdownAppendTo\" [scrollHeight]=\"dropdownScrollHeight\">\n <ng-template pTemplate=\"selectedItem\">{{currentPageReport}}</ng-template>\n </p-dropdown>\n <button type=\"button\" [disabled]=\"isLastPage()\" (click)=\"changePageToNext($event)\" pRipple\n class=\"p-paginator-next p-paginator-element p-link\" [ngClass]=\"{'p-disabled':isLastPage()}\">\n <span class=\"p-paginator-icon pi pi-angle-right\"></span>\n </button>\n <button *ngIf=\"showFirstLastIcon\" type=\"button\" [disabled]=\"isLastPage()\" (click)=\"changePageToLast($event)\" pRipple\n class=\"p-paginator-last p-paginator-element p-link\" [ngClass]=\"{'p-disabled':isLastPage()}\">\n <span class=\"p-paginator-icon pi pi-angle-double-right\"></span>\n </button>\n <p-dropdown [options]=\"rowsPerPageItems\" [(ngModel)]=\"rows\" *ngIf=\"rowsPerPageOptions\" styleClass=\"p-paginator-rpp-options\"\n (onChange)=\"onRppChange($event)\" [appendTo]=\"dropdownAppendTo\" [scrollHeight]=\"dropdownScrollHeight\">\n <ng-container *ngIf=\"dropdownItemTemplate\">\n <ng-template let-item pTemplate=\"item\">\n <ng-container *ngTemplateOutlet=\"dropdownItemTemplate; context: {$implicit: item}\">\n </ng-container>\n </ng-template>\n </ng-container>\n </p-dropdown>\n <div class=\"p-paginator-right-content\" *ngIf=\"templateRight\">\n <ng-container *ngTemplateOutlet=\"templateRight; context: {$implicit: paginatorState}\"></ng-container>\n </div>\n </div>\n ","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":54,"character":21},"member":"OnPush"},"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":55,"character":19},"member":"None"},"styles":[".p-paginator{align-items:center;display:flex;flex-wrap:wrap;justify-content:center}.p-paginator-left-content{margin-right:auto}.p-paginator-right-content{margin-left:auto}.p-paginator-current,.p-paginator-first,.p-paginator-last,.p-paginator-next,.p-paginator-page,.p-paginator-prev{-ms-user-select:none;-webkit-user-select:none;align-items:center;cursor:pointer;display:inline-flex;justify-content:center;line-height:1;overflow:hidden;position:relative;user-select:none}.p-paginator-element:focus{position:relative;z-index:1}"]}]}],"members":{"pageLinkSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":60,"character":5}}]}],"onPageChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":62,"character":5}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":64,"character":5}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":66,"character":5}}]}],"alwaysShow":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":68,"character":5}}]}],"templateLeft":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":70,"character":5}}]}],"templateRight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":72,"character":5}}]}],"dropdownAppendTo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":74,"character":5}}]}],"dropdownScrollHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":76,"character":5}}]}],"currentPageReportTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":78,"character":5}}]}],"showCurrentPageReport":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":80,"character":5}}]}],"showFirstLastIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":82,"character":5}}]}],"totalRecords":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":84,"character":5}}]}],"rows":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":86,"character":5}}]}],"rowsPerPageOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":88,"character":5}}]}],"showJumpToPageDropdown":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":90,"character":5}}]}],"showPageLinks":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":92,"character":5}}]}],"dropdownItemTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":94,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":108,"character":28}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"first":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":138,"character":5}}]}],"updateRowsPerPageOptions":[{"__symbolic":"method"}],"isFirstPage":[{"__symbolic":"method"}],"isLastPage":[{"__symbolic":"method"}],"getPageCount":[{"__symbolic":"method"}],"calculatePageLinkBoundaries":[{"__symbolic":"method"}],"updatePageLinks":[{"__symbolic":"method"}],"changePage":[{"__symbolic":"method"}],"updateFirst":[{"__symbolic":"method"}],"getPage":[{"__symbolic":"method"}],"changePageToFirst":[{"__symbolic":"method"}],"changePageToPrev":[{"__symbolic":"method"}],"changePageToNext":[{"__symbolic":"method"}],"changePageToLast":[{"__symbolic":"method"}],"onPageLinkClick":[{"__symbolic":"method"}],"onRppChange":[{"__symbolic":"method"}],"onPageDropdownChange":[{"__symbolic":"method"}],"updatePaginatorState":[{"__symbolic":"method"}]}},"PaginatorModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":293,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":294,"character":14},{"__symbolic":"reference","module":"primeng/dropdown","name":"DropdownModule","line":294,"character":27},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":294,"character":42},{"__symbolic":"reference","module":"primeng/api","name":"SharedModule","line":294,"character":54},{"__symbolic":"reference","module":"primeng/ripple","name":"RippleModule","line":294,"character":67}],"exports":[{"__symbolic":"reference","name":"Paginator"},{"__symbolic":"reference","module":"primeng/dropdown","name":"DropdownModule","line":295,"character":24},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":295,"character":39},{"__symbolic":"reference","module":"primeng/api","name":"SharedModule","line":295,"character":51}],"declarations":[{"__symbolic":"reference","name":"Paginator"}]}]}],"members":{}}},"origins":{"Paginator":"./paginator","PaginatorModule":"./paginator"},"importAs":"primeng/paginator"}