How to get started with Syncfusion Angular 9 Pager control?

2 mins read

The Essential JS 2 Pager control allows you to navigate between records which are sectioned into pages. The navigation between pages which is a key functionality of the Pager is done using built-in numeric and navigation buttons and provides easy user interaction. In this knowledge base, we will explain you the steps required to create a simple Pager in Angular9 and demonstrate the basic usage of the Pager component.

Prerequisites

Before we start, we need the following items to create Angular pager in the Angular 9 application

Node.js (latest version)
Angular 9
Angular CLI
Visual studio code for editor.

Installation and application creation

Install Angular cli 9 using the following command.
```
npm install -g @angular/cli@9.0.0
```

Angular9 installation

Create an Angular 9 application using Angular cli.
```
ng new angular9-app
cd angular9-app
```

Serve the Angular 9 application using the following command.

ng serve

Listen to the application at localhost:4200. Your application will serve in the browser as follows.

angular 9 executed page

Integration of Angular pager

After running the Angular 9 application successfully, configure the Angular Pager in this application. Install Angular Data Grid and EJ2 package using the following command.

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

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

Import PagerModule from the installed package in 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 { }

You should refer to the CSS file for Angular pager in global style.css file.
```
@import "../node_modules/@syncfusion/ej2/material.css";
```

Now you can modify the template in app.component.ts to render the pager.

import {Component, OnInit} from '@angular/core';
 
@Component({
    selector: 'app-root',
    template: `<ejs-pager [totalRecordsCount]='20'>
                </ejs-pager>`
})
export class AppComponent implements OnInit{
 
    ngOnInit(): void {
    }
}

Now serve the application using the following command.
```
ng serve --open
```

Once all the files are compiled successfully. It will serve the site at localhost:4200

The following screenshot illustrates this.

pager component

Enabling Features

So far, we have learned, how to add a pager component. Now, let we check to enable the pager component features.

PageSize

pageSize value defines the number of records to be displayed per page. The default value for the pageSize is 12. You can set this through property binding.

import { Component, OnInit } from '@angular/core';
 
@Component({
    selector: 'app-root',
    template: `<ejs-pager [totalRecordsCount]='20' [pageSize]='5'>
                </ejs-pager>`
})
export class AppComponent implements OnInit{
 
    ngOnInit(): void {
    }
}

PageCount

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

import { Component, OnInit } from '@angular/core';
 
@Component({
    selector: 'app-root',
    template: `<ejs-pager [totalRecordsCount]='20' [pageCount]='1'>
                </ejs-pager>`
})
export class AppComponent implements OnInit{
 
    ngOnInit(): void {
    }
}

Also, you can check our Angular Pager features from this page. If you have any queries or require clarifications, please let us know in comments section below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!

Did you find this information helpful?

Yes

Comments (0)