LIDOR SYSTEMS

Advanced User Interface Controls and Components

Overview of IntegralUI Paginator for Angular 2

Created: 24 October 2016

IntegralUI Paginator is a native Angular 2 component that allows you to add pagination in your application. You can divide your content in multiple pages, and then using Paginator you can select a page number and corresponding content will appear in current view. In this article, we will give detailed information on what features are included in Paginator component.

Paginator component is part of IntegralUI Studio for Web
a suite of UI Components for development of web apps

The demonstration above shows only the basic features available in Paginator component. There are few slides each with a header and content panel. Slide headers are displayed in trapezoidal shape on the right side, and whenever a slide is selected an animation runs showing the slide content in current view of the Paginator component.

How to Use IntegralUI Paginator in Angular 2

In order to use the Paginator component in your app, you need to do the following:

  • Place the Paginator using the iui-paginator tag name
  • Split your page content in multiple sections
  • Set the maximum number of sections to Paginator
  • Set the number of initial section that will be visible
  • Handle the pageChanged event to update the selected page number

Paginator consists of several buttons and an input field showing page that is currently selected. Using the buttons you can quickly navigate among pages. Showing first, previous, next or last pages by clicking on corresponding button. If there are many pages present, you can specify the page number in input field and show content that is related to specified number.

You can use the Paginator with any custom HTML content. In this example, we have a container with few blocks of text lines (to keep it simple). Depending on which page is currently selected, the corresponding block is shown, while others are hidden.

//

// main.ts file

//

 

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

 

const platform = platformBrowserDynamic();

platform.bootstrapModule(AppModule);

 

 

 

//

// app.module.ts file

//

 

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import { IntegralUIModule } from 'integralui-web/integralui.module';

 

@NgModule({

imports: [ BrowserModule, IntegralUIModule ],

declarations: [ AppComponent ],

bootstrap: [ AppComponent ]

})

export class AppModule { }

 

 

 

//

// app.component.ts file

//

 

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

 

@Component({

selector: 'iui-app',

templateUrl: 'app.template.html',

styleUrls: ['paginator-overview.css']

})

export class AppComponent {

// An Array object that holds all item objects shown in Paginator

// It is set as a list of any custom objects, you can use any custom fields and bind them with Paginator using its properties

private pages: Array;

private maxLimit: number = 0;

 

// Initialize pages in component constructor

constructor(){

this.pages = [

{ text: "Page 1" },

{ text: "Page 2" },

{ text: "Page 3" },

{ text: "Page 4" },

{ text: "Page 5" }

];

 

this.maxLimit = this.pages.length;

}

 

 

}

//

// app.template.html file

//

 

<div class="container">

<div class="page-container">

<div class="page-block" *ngFor="let page of pages; let i = index">

<span *ngIf="i==selectedPage-1">

{{page.text}}

</span>

</div>

</div>

<div align="center">

<iui-paginator [maxPages]="maxLimit"></iui-paginator>

</div>

</div>

/*

paginator-overview.css file

*/

 

.container

{

position: relative;

width: 300px;

}

.page-container

{

height: 152px;

}

.page-block

{

border: thin solid green;

position: absolute;

top: 0;

left: 0;

width: 300px;

height: 150px;

}

.page-block span

{

display: block;

text-align: center;

margin-top: 70px;

}

You can use an array object to store data for each block. Then using the ngFor directive, you can cycle through this list and put the content to each block. The link between the container and the paginator is the selectedPage variable. This variable determines which page number is currently selected, which relates to the index of corresponding block.

Supported Properties

In order to change the behavior of the Paginator component, you can use the following properties:

  • controlStyle - specifies an object that holds the names of custom CSS classes
  • maxPages - determines how many pages are present
  • currentPage - specifies the number of currently selected page

By setting the above properties you can define the range in which you will navigate using the paginator and the number of page that is currently active.

Supported Events

Here is a list of available events:

  • pageChanged - occurs when currently selected page has changed

Whenever a new page is selected either using the navigation buttons or setting directly the page number in input field, the pageChanged event is fired. You can use this event to update the currentPage property value.

private selectedPage: number = 0;

 

pageChanged(e){

this.selectedPage = e.value;

}

<iui-paginator [maxPages]="maxLimit" [currentPage]="selectedPage" (pageChanged)="pageChanged($event)"></iui-paginator>

Supported Methods

In some cases, you may need to navigate among pages from code. You can do this by using these public methods:

  • firstPage - moves to the first page in the list
  • lastPage - moves to the last page in the list
  • nextPage - moves to the next page of currently selected page
  • prevPage - moves to the previous page of currently selected page

In order to access these methods, at first you need to get a reference to the Paginator component. In HTML add the #paginator variable (or you can choose any other name) to the . Next by using ViewChild class and setting this variable as argument, you can locate the Paginator within your application component.

//

// app.component.ts file

//

 

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

 

@Component({

selector: 'iui-app',

templateUrl: 'app.template.html',

styleUrls: ['paginator-overview.css']

})

export class AppComponent {

// Get a reference of Paginator component

@ViewChild('paginator') paginator: IntegralUIPaginator;

 

// An Array object that holds all item objects shown in Paginator

// It is set as a list of any custom objects, you can use any custom fields and bind them with Paginator using its properties

private pages: Array;

 

// Initialize slides in component constructor

constructor(){

this.pages = [

{ text: "Page 1" },

{ text: "Page 2" },

{ text: "Page 3" },

{ text: "Page 4" },

{ text: "Page 5" }

];

 

this.maxLimit = this.pages.length;

}

 

// Selects the next page

moveToNext()(){

this.paginator.nextPage();

}

}

//

// app.template.html file

//

 

<button (click)="moveToNext()">Move Next</button>

<iui-paginator [maxPages]="maxLimit" #paginator></iui-paginator>

How to Customize the Paginator Appearance

The Paginator component comes with a style sheet that contains all CSS classes used by the slide strip. By changing the attributes of these classes in your code, you can modify the appearance of the Paginator, partially or in whole.

Furthermore, you can add your own CSS classes and override the default ones within your application code. For this purpose, the controlStyle property is used, which is an object holding the names of CSS classes for each control part. By changing this object value, you can add the names of new classes and replace the default ones.

Conclusion

IntegralUI Paginator component allows you to add pagination to each page in your application. You can set up the maximum number of pages and page that is currently active. Using navigation buttons or public methods, you can quickly move through pages.

Currently this component is in BETA.

The Paginator component will be part of IntegralUI Studio for Web. Here you can check out different features of existing components.

Did you Like this Article?


Enter your e-mail address below and you will receive latest articles as well as news on upcoming events and special offers.