Advanced User Interface Controls and Components
Created: 24 October 2016
Updated: 24 March 2017
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.
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
The demonstration above shows five pages showing single text line. By using buttons from Paginator you can navigate between pages, or you can set a number in the input box to go directly to specified page.
In order to use the Paginator component in your app, you need to do the following:
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/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<any>;
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.
In order to change the behavior of the Paginator component, you can use the following properties:
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.
Here is a list of available events:
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>
In some cases, you may need to navigate among pages from code. You can do this by using these public methods:
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
//
// 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>
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.
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.
The Paginator component is part of IntegralUI Web.