Angular
EditEdit This DocumentInstall NuGet
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Getting started with Angular Pager component

This section explains you the steps required to create a simple Pager and demonstrate the basic usage of the Pager component in Angular environment.

Setup Angular Environment

You can use Angular CLI to setup your Angular applications. To install Angular CLI use the following command.

npm install -g @angular/cli

Create an Angular Application

Start a new Angular application using below Angular CLI command.

ng new my-app
cd my-app

Adding Syncfusion Pager package

All the available Essential JS 2 packages are published in npmjs.com registry.

To install Pager component, use the following command.

npm install @syncfusion/ej2-angular-grids --save

The —save will instruct NPM to include the pager package inside of the dependencies section of the package.json.

Registering Pager Module

Import Pager module into Angular application(app.module.ts) from the package @syncfusion/ej2-angular-grids [src/app/app.module.ts].

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { PagerModule} from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    PagerModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Adding CSS reference

The CSS files are available in ../node_modules/@syncfusion package folder. This can be referenced in [src/styles.css] using following code..

@import '../node_modules/@syncfusion/ej2-angular-grids/styles/material.css';
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';

Adding Pager component

Modify the template in [src/app/app.component.ts] file to render the pager component. Add the Angular pager by using <ejs-pager> selector in template section of the app.component.ts file.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  // specifies the template string for the Pager component
  template: `<ejs-pager [totalRecordsCount]='20'>
               </ejs-pager>`
})
export class AppComponent implements OnInit {
     ngOnInit(): void {
    }

}

Page Size

pageSize value defines the number of records to be displayed per page. The default value for the pageSize is 12.

Source
Preview
app.component.ts
app.module.ts
main.ts
import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-root',
    template: `<ejs-pager [pageSize]= '1' [totalRecordsCount]='20'>
                </ejs-pager>`
})
export class AppComponent implements OnInit{

    ngOnInit(): void {
    }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { PagerModule } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        PagerModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Page Count

pageCount value defines the number of pages to be displayed in the pager component for navigation. The default value for pageCount is 10 and value will be updated based on totalRecordsCount and pageSize values.

Source
Preview
app.component.ts
app.module.ts
main.ts
import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-root',
    template: `<ejs-pager [pageSize]='1' [pageCount]='3' [totalRecordsCount]='20'>
                </ejs-pager>`
})
export class AppComponent implements OnInit{

    ngOnInit(): void {
    }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { PagerModule } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        PagerModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Run the application

The quickstart project is configured to compile and run the application in browser. Use the following command to run the application.

ng serve --open

Output will be appears as follows.

Source
Preview
app.component.ts
app.module.ts
main.ts
import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-root',
    template: `<ejs-pager [pageSize]='8' [pageCount]='3' [totalRecordsCount]='20'>
                </ejs-pager>`
})
export class AppComponent implements OnInit{

    ngOnInit(): void {
    }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { PagerModule } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        PagerModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Previous
Next