DevExtreme v24.2 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

Angular Pagination

DevExpress Pagination component allows users to navigate between pages and adjust page size at runtime. In this demo, users can browse through individual employee cards using the Pagination component.

To set up our Pagination component, specify the following options:

DevExtreme Accessibility Compliance
DevExtreme component libraries meet a variety of WCAG and Section 508 compliance standards. To assess this demo’s accessibility level, click the Run AXE® Validation button to launch the AXE® web accessibility evaluation tool.
All trademarks or registered trademarks are property of their respective owners. AXE® Terms of Use
The overall accessibility level of your application depends on the Pagination features used.
Backend API
<div class="container"> <div class="employees" [ngClass]="pageSize === 4 ? 'employees--forth' : 'employees--six'" > <employee-card *ngFor="let employee of pageEmployees" [employee]="employee"> </employee-card> </div> <dx-pagination [showInfo]="showInfo" [showNavigationButtons]="showNavigationButtons" [allowedPageSizes]="allowedPageSizes" [itemCount]="itemCount" [pageIndex]="pageIndex" [pageSize]="pageSize" (pageIndexChange)="onPageIndexChange($event)" (pageSizeChange)="onPageSizeChange($event)" > </dx-pagination> </div>
import { NgModule, Component, enableProdMode } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { DxPaginationModule } from 'devextreme-angular'; import { Employee, Service } from './app.service'; import { EmployeeCard } from './employee-card/employee-card.component'; if (!/localhost/.test(document.location.host)) { enableProdMode(); } let modulePrefix = ''; // @ts-ignore if (window && window.config?.packageConfigPaths) { modulePrefix = '/app'; } @Component({ selector: 'demo-app', templateUrl: `app/app.component.html`, styleUrls: [`app/app.component.css`], providers: [Service], }) export class AppComponent { employees: Employee[]; pageEmployees: Employee[]; itemCount: number; readonly allowedPageSizes = [4, 6]; showInfo = true; showNavigationButtons = true; pageIndex = 1; pageSize = 4; onPageIndexChange(val) { this.pageIndex = val; this.setPageEmployees(); } onPageSizeChange(val) { this.pageSize = val; this.setPageEmployees(); } setPageEmployees() { this.pageEmployees = this.employees.slice((this.pageIndex - 1) * this.pageSize, this.pageIndex * this.pageSize); } constructor(service: Service) { this.employees = service.getEmployees(); this.itemCount = this.employees.length; this.setPageEmployees(); } } @NgModule({ imports: [ BrowserModule, DxPaginationModule, ], declarations: [AppComponent, EmployeeCard], bootstrap: [AppComponent], }) export class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule);
body { overflow-x: hidden; } .demo-container { display: flex; flex-direction: column; align-items: center; } .container { min-width: 720px; width: 100%; } ::ng-deep .employees { display: flex; flex-wrap: wrap; gap: 16px; min-height: 644px; padding-bottom: 24px; } ::ng-deep employee-card { width: 100%; max-height: 312px; align-self: stretch; overflow: hidden; border: var(--dx-border-width) solid var(--dx-color-border); border-radius: var(--dx-border-radius); background-color: var(--dx-component-color-bg); } ::ng-deep .employees.employees--forth employee-card { min-width: 250px; width: 390px; flex-basis: calc(50% - 10px); } ::ng-deep .employees.employees--six employee-card { flex-basis: calc(33.3% - 12.5px); } ::ng-deep .employees__img-wrapper { height: 180px; position: relative; overflow: hidden; border-bottom: var(--dx-border-width) solid var(--dx-color-border); background-color: #fff; } ::ng-deep .employees__img { display: block; height: 220px; position: absolute; content: ""; left: 50%; top: 0; transform: translateX(-50%); } ::ng-deep .employees__info { padding: 24px; } ::ng-deep .employees__info-row { margin-bottom: 8px; text-wrap: nowrap; } ::ng-deep .employees__info-label { display: inline-block; font-weight: 600; vertical-align: middle; } ::ng-deep .employees.employees--forth .employees__info-label { width: 160px; } ::ng-deep .employees.employees--six .employees__info-label { width: 80px; } ::ng-deep .employees__info-value { display: inline-block; text-wrap: nowrap; text-overflow: ellipsis; vertical-align: middle; overflow: hidden; white-space:nowrap } ::ng-deep .employees.employees--forth .employees__info-value { max-width: 180px; } ::ng-deep .employees.employees--six .employees__info-value { max-width: 120px; }
import { Injectable } from '@angular/core'; export class Employee { ID: number; FullName: string; Title: string; Employee_Picture: string; Picture: string; MobilePhone: string; } const employees: Employee[] = [ { ID: 1, FullName: 'John Heart', Title: 'CEO', Employee_Picture: '01.png', Picture: '../../../../images/employees/01.png', MobilePhone: '2135559392', }, { ID: 2, FullName: 'Samantha Bright', Title: 'COO', Employee_Picture: '30.png', Picture: '../../../../images/employees/30.png', MobilePhone: '2135552858', }, { ID: 3, FullName: 'Arthur Miller', Title: 'CTO', Employee_Picture: '10.png', Picture: '../../../../images/employees/10.png', MobilePhone: '3105558583', }, { ID: 4, FullName: 'Robert Reagan', Title: 'CMO', Employee_Picture: '03.png', Picture: '../../../../images/employees/03.png', MobilePhone: '8185552387', }, { ID: 5, FullName: 'Greta Sims', Title: 'HR Manager', Employee_Picture: '04.png', Picture: '../../../../images/employees/04.png', MobilePhone: '8185556546', }, { ID: 6, FullName: 'Brett Wade', Title: 'IT Manager', Employee_Picture: '05.png', Picture: '../../../../images/employees/05.png', MobilePhone: '6265550358', }, { ID: 7, FullName: 'Sandra Johnson', Title: 'Controller', Employee_Picture: '06.png', Picture: '../../../../images/employees/06.png', MobilePhone: '5625552082', }, { ID: 8, FullName: 'Ed Holmes', Title: 'Sales Manager', Employee_Picture: '11.png', Picture: '../../../../images/employees/11.png', MobilePhone: '3105551288', }, { ID: 9, FullName: 'Barb Banks', Title: 'Support Manager', Employee_Picture: '20.png', Picture: '../../../../images/employees/20.png', MobilePhone: '3105553355', }, { ID: 10, FullName: 'Kevin Carter', Title: 'Shipping Manager', Employee_Picture: '07.png', Picture: '../../../../images/employees/07.png', MobilePhone: '2135552840', }, { ID: 11, FullName: 'Cindy Stanwick', Title: 'HR Assistant', Employee_Picture: '08.png', Picture: '../../../../images/employees/08.png', MobilePhone: '8185556655', }, { ID: 12, FullName: 'Sammy Hill', Title: 'Sales Assistant', Employee_Picture: '12.png', Picture: '../../../../images/employees/12.png', MobilePhone: '6265557292', }, { ID: 13, FullName: 'Davey Jones', Title: 'Shipping Assistant', Employee_Picture: '13.png', Picture: '../../../../images/employees/13.png', MobilePhone: '6265550281', }, { ID: 14, FullName: 'Victor Norris', Title: 'Shipping Assistant', Employee_Picture: '14.png', Picture: '../../../../images/employees/14.png', MobilePhone: '2135559278', }, { ID: 15, FullName: 'Mary Stern', Title: 'Shipping Assistant', Employee_Picture: '15.png', Picture: '../../../../images/employees/15.png', MobilePhone: '8185557857', }, { ID: 16, FullName: 'Robin Cosworth', Title: 'Shipping Assistant', Employee_Picture: '16.png', Picture: '../../../../images/employees/16.png', MobilePhone: '8185550942', }, { ID: 17, FullName: 'Kelly Rodriguez', Title: 'Support Assistant', Employee_Picture: '17.png', Picture: '../../../../images/employees/17.png', MobilePhone: '8185559248', }, { ID: 18, FullName: 'James Anderson', Title: 'Support Assistant', Employee_Picture: '18.png', Picture: '../../../../images/employees/18.png', MobilePhone: '3235554702', }, { ID: 19, FullName: 'Antony Remmen', Title: 'Support Assistant', Employee_Picture: '19.png', Picture: '../../../../images/employees/19.png', MobilePhone: '3105556625', }, { ID: 20, FullName: 'Olivia Peyton', Title: 'Sales Assistant', Employee_Picture: '09.png', Picture: '../../../../images/employees/09.png', MobilePhone: '3105552728', }, { ID: 21, FullName: 'Taylor Riley', Title: 'Network Admin', Employee_Picture: '21.png', Picture: '../../../../images/employees/21.png', MobilePhone: '3105557276', }, { ID: 22, FullName: 'Amelia Harper', Title: 'Network Admin', Employee_Picture: '22.png', Picture: '../../../../images/employees/22.png', MobilePhone: '2135554276', }, { ID: 23, FullName: 'Wally Hobbs', Title: 'Programmer', Employee_Picture: '23.png', Picture: '../../../../images/employees/23.png', MobilePhone: '8185558872', }, { ID: 24, FullName: 'Brad Jameson', Title: 'Programmer', Employee_Picture: '24.png', Picture: '../../../../images/employees/24.png', MobilePhone: '8185554646', }, { ID: 25, FullName: 'Karen Goodson', Title: 'Programmer', Employee_Picture: '25.png', Picture: '../../../../images/employees/25.png', MobilePhone: '6265550908', }, { ID: 26, FullName: 'Marcus Orbison', Title: 'Travel Coordinator', Employee_Picture: '26.png', Picture: '../../../../images/employees/26.png', MobilePhone: '2135557098', }, { ID: 27, FullName: 'Sandy Bright', Title: 'Benefits Coordinator', Employee_Picture: '27.png', Picture: '../../../../images/employees/27.png', MobilePhone: '8185550524', }, { ID: 28, FullName: 'Morgan Kennedy', Title: 'Graphic Designer', Employee_Picture: '28.png', Picture: '../../../../images/employees/28.png', MobilePhone: '8185558238', }, { ID: 29, FullName: 'Violet Bailey', Title: 'Jr Graphic Designer', Employee_Picture: '29.png', Picture: '../../../../images/employees/29.png', MobilePhone: '8185552478', }, { ID: 30, FullName: 'Ken Samuelson', Title: 'Ombudsman', Employee_Picture: '02.png', Picture: '../../../../images/employees/02.png', MobilePhone: '5625559282', }, { ID: 31, FullName: 'Nat Maguiree', Title: 'Trainer', Employee_Picture: '31.png', Picture: '../../../../images/employees/31.png', MobilePhone: '5625558377', }, { ID: 32, FullName: 'Bart Arnaz', Title: 'Director of Engineering', Employee_Picture: '32.png', Picture: '../../../../images/employees/32.png', MobilePhone: '7145552000', }, { ID: 33, FullName: 'Leah Simpson', Title: 'Test Coordinator', Employee_Picture: '33.png', Picture: '../../../../images/employees/33.png', MobilePhone: '5625595830', }, { ID: 34, FullName: 'Arnie Schwartz', Title: 'Engineer', Employee_Picture: '34.png', Picture: '../../../../images/employees/34.png', MobilePhone: '7145558882', }, { ID: 35, FullName: 'Billy Zimmer', Title: 'Engineer', Employee_Picture: '51.png', Picture: '../../../../images/employees/51.png', MobilePhone: '9095556939', }, { ID: 36, FullName: 'Samantha Piper', Title: 'Engineer', Employee_Picture: '35.png', Picture: '../../../../images/employees/35.png', MobilePhone: '3235554512', }, { ID: 37, FullName: 'Maggie Boxter', Title: 'Engineer', Employee_Picture: '36.png', Picture: '../../../../images/employees/36.png', MobilePhone: '7145557239', }, { ID: 38, FullName: 'Terry Bradley', Title: 'QA Engineer', Employee_Picture: '37.png', Picture: '../../../../images/employees/37.png', MobilePhone: '8055552788', }, { ID: 39, FullName: 'Gabe Jones', Title: 'Retail Coordinator', Employee_Picture: '38.png', Picture: '../../../../images/employees/38.png', MobilePhone: '3105555395', }, { ID: 40, FullName: 'Lucy Ball', Title: 'Sales Assistant', Employee_Picture: '39.png', Picture: '../../../../images/employees/39.png', MobilePhone: '3105553357', }, { ID: 41, FullName: 'Jim Packard', Title: 'Retail Sales Manager', Employee_Picture: '40.png', Picture: '../../../../images/employees/40.png', MobilePhone: '6615558224', }, { ID: 42, FullName: 'Hannah Brookly', Title: 'Online Sales Manager', Employee_Picture: '41.png', Picture: '../../../../images/employees/41.png', MobilePhone: '8055553627', }, { ID: 43, FullName: 'Harv Mudd', Title: 'Retail Sales Manager', Employee_Picture: '42.png', Picture: '../../../../images/employees/42.png', MobilePhone: '8315553895', }, { ID: 44, FullName: 'Clark Morgan', Title: 'Retail Sales Manager', Employee_Picture: '43.png', Picture: '../../../../images/employees/43.png', MobilePhone: '9255552525', }, { ID: 45, FullName: 'Todd Hoffman', Title: 'Retail Sales Manager', Employee_Picture: '44.png', Picture: '../../../../images/employees/44.png', MobilePhone: '9255553579', }, { ID: 46, FullName: 'Jackie Garmin', Title: 'Support Assistant', Employee_Picture: '45.png', Picture: '../../../../images/employees/45.png', MobilePhone: '2135551824', }, { ID: 47, FullName: 'Lincoln Bartlett', Title: 'Sales Assistant', Employee_Picture: '46.png', Picture: '../../../../images/employees/46.png', MobilePhone: '2135558272', }, { ID: 48, FullName: 'Brad Farkus', Title: 'Engineer', Employee_Picture: '47.png', Picture: '../../../../images/employees/47.png', MobilePhone: '2135553626', }, { ID: 49, FullName: 'Jenny Hobbs', Title: 'Shipping Assistant', Employee_Picture: '48.png', Picture: '../../../../images/employees/48.png', MobilePhone: '3105552668', }, { ID: 50, FullName: 'Dallas Lou', Title: 'Shipping Assistant', Employee_Picture: '49.png', Picture: '../../../../images/employees/49.png', MobilePhone: '2135558357', }, { ID: 51, FullName: 'Stu Pizaro', Title: 'Engineer', Employee_Picture: '50.png', Picture: '../../../../images/employees/50.png', MobilePhone: '2135552552', }, ]; @Injectable() export class Service { getEmployees() { return employees; } }
// In real applications, you should not transpile code in the browser. // You can see how to create your own application with Angular and DevExtreme here: // https://js.devexpress.com/Documentation/Guide/Angular_Components/Getting_Started/Create_a_DevExtreme_Application/ const componentNames = [ 'accordion', 'action-sheet', 'autocomplete', 'bar-gauge', 'box', 'bullet', 'button-group', 'button', 'calendar', 'chart', 'chat', 'check-box', 'circular-gauge', 'color-box', 'context-menu', 'data-grid', 'date-box', 'date-range-box', 'defer-rendering', 'diagram', 'draggable', 'drawer', 'drop-down-box', 'drop-down-button', 'file-manager', 'file-uploader', 'filter-builder', 'form', 'funnel', 'gallery', 'gantt', 'html-editor', 'linear-gauge', 'list', 'load-indicator', 'load-panel', 'lookup', 'map', 'menu', 'multi-view', 'nested', 'number-box', 'pagination', 'pie-chart', 'pivot-grid-field-chooser', 'pivot-grid', 'polar-chart', 'popover', 'popup', 'progress-bar', 'radio-group', 'range-selector', 'range-slider', 'recurrence-editor', 'resizable', 'responsive-box', 'sankey', 'scheduler', 'scroll-view', 'select-box', 'slider', 'sortable', 'sparkline', 'speed-dial-action', 'splitter', 'switch', 'tab-panel', 'tabs', 'tag-box', 'text-area', 'text-box', 'tile-view', 'toast', 'toolbar', 'tooltip', 'tree-list', 'tree-map', 'tree-view', 'validation-group', 'validation-summary', 'validator', 'vector-map', ]; window.exports = window.exports || {}; window.config = { transpiler: 'ts', typescriptOptions: { module: 'system', emitDecoratorMetadata: true, experimentalDecorators: true, }, meta: { 'typescript': { 'exports': 'ts', }, 'devextreme/time_zone_utils.js': { 'esModule': true, }, 'devextreme/localization.js': { 'esModule': true, }, 'devextreme/viz/palette.js': { 'esModule': true, }, '@angular/platform-browser-dynamic': { 'esModule': true, }, '@angular/platform-browser': { 'esModule': true, }, '@angular/core': { 'esModule': true, }, '@angular/common': { 'esModule': true, }, '@angular/common/http': { 'esModule': true, }, '@angular/animations': { 'esModule': true, }, '@angular/forms': { 'esModule': true, }, 'openai': { 'esModule': true, }, }, paths: { 'npm:': 'https://cdn.jsdelivr.net/npm/', 'bundles:': '../../../../bundles/', 'externals:': '../../../../bundles/externals/', }, map: { 'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js', 'typescript': 'npm:typescript@4.2.4/lib/typescript.js', 'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js', /* @angular */ '@angular/compiler': 'bundles:@angular/compiler.umd.js', '@angular/platform-browser-dynamic': 'bundles:@angular/platform-browser-dynamic.umd.js', '@angular/core': 'bundles:@angular/core.umd.js', '@angular/core/primitives/signals': 'bundles:@angular/core.primitives.signals.umd.js', '@angular/common': 'bundles:@angular/common.umd.js', '@angular/common/http': 'bundles:@angular/common-http.umd.js', '@angular/platform-browser': 'bundles:@angular/platform-browser.umd.js', '@angular/platform-browser/animations': 'bundles:@angular/platform-browser.umd.js', '@angular/forms': 'bundles:@angular/forms.umd.js', /* devextreme */ 'devextreme': 'npm:devextreme@24.2.7/cjs', '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.12', 'devextreme/bundles/dx.all': 'npm:devextreme@24.2.7/bundles/dx.all.js', 'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.2.16', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.60', /* devextreme-angular umd maps */ 'devextreme-angular': 'bundles:devextreme-angular/devextreme-angular.umd.js', 'devextreme-angular/core': 'bundles:devextreme-angular/devextreme-angular-core.umd.js', 'devextreme-angular/http': 'bundles:devextreme-angular/devextreme-angular-http.umd.js', ...componentNames.reduce((acc, name) => { acc[`devextreme-angular/ui/${name}`] = `bundles:devextreme-angular/devextreme-angular-ui-${name}.umd.js`; acc[`devextreme-angular/ui/${name}/nested`] = `bundles:devextreme-angular/devextreme-angular-ui-${name}-nested.umd.js`; return acc; }, {}), 'tslib': 'npm:tslib/tslib.js', 'rxjs': 'npm:rxjs@7.5.3/dist/bundles/rxjs.umd.js', 'rxjs/operators': 'npm:rxjs@7.5.3/dist/cjs/operators/index.js', 'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js', 'luxon': 'npm:luxon@3.4.4/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign', 'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js', 'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js', 'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js', 'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js', 'inferno-hydrate': 'npm:inferno-hydrate/dist/inferno-hydrate.min.js', 'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js', 'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js', 'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js', // Prettier 'prettier/standalone': 'npm:prettier@2.8.8/standalone.js', 'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js', }, packages: { 'app': { main: './app.component.ts', defaultExtension: 'ts', }, 'devextreme': { defaultExtension: 'js', }, 'devextreme/events/utils': { main: 'index', }, 'devextreme/common/core/events/utils': { main: 'index', }, 'devextreme/events': { main: 'index', }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js', }, 'rxjs': { defaultExtension: 'js', }, 'rxjs/operators': { defaultExtension: 'js', }, }, packageConfigPaths: [ 'npm:@devextreme/*/package.json', 'npm:@devextreme/runtime@3.0.12/inferno/package.json', 'npm:rxjs@7.5.3/package.json', 'npm:rxjs@7.5.3/operators/package.json', 'npm:devexpress-diagram@2.2.16/package.json', 'npm:devexpress-gantt@4.1.60/package.json', ], }; System.config(window.config); // System.import('@angular/compiler').catch(console.error.bind(console));
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.2.7/css/dx.light.css" /> <script src="https://cdn.jsdelivr.net/npm/core-js@2.6.12/client/shim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/zone.js@0.14.10/bundles/zone.umd.js"></script> <script src="https://cdn.jsdelivr.net/npm/reflect-metadata@0.1.13/Reflect.js"></script> <script src="https://cdn.jsdelivr.net/npm/systemjs@0.21.3/dist/system.js"></script> <script src="config.js"></script> <script> System.import("app").catch(console.error.bind(console)); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> </body> </html>
<div class="employees__img-wrapper"> <img class="employees__img" [src]="employee.Picture" [alt]="employee.FullName" /> </div> <div class="employees__info"> <div class="employees__info-row"> <span class="employees__info-label">Full Name:</span> <span class="employees__info-value">{{ employee.FullName }}</span> </div> <div class="employees__info-row"> <span class="employees__info-label">Position:</span> <span class="employees__info-value">{{ employee.Title }}</span> </div> <div class="employees__info-row"> <span class="employees__info-label">Phone:</span> <span class="employees__info-value">{{ employee.MobilePhone }}</span> </div> </div>
import { Component, Input } from '@angular/core'; import { Employee } from '../app.service'; let modulePrefix = ''; // @ts-ignore if (window && window.config?.packageConfigPaths) { modulePrefix = '/app'; } @Component({ selector: 'employee-card', templateUrl: `app/employee-card/employee-card.component.html`, }) export class EmployeeCard { @Input() employee: Employee; }