Pager Settings and Types

The Pager component features multiple settings to customize the paging UI.

Types

The pager types are:

  • Numeric - Renders buttons with numbers.
  • Input - Renders a NumericTextBox for entering the page number.

To configure the pager type and number of numeric buttons, use the type and buttonCount options:

  • type - Accepts the numeric (buttons with numbers) and input (NumericTextBox for entering the page number) values.
  • buttonCount - Sets the maximum number of numeric buttons to be rendered when type is numeric.

Settings

The following settings enable you to determine which built-in pager elements will be rendered:

  • pageSizeValues - Toggles a DropDownList with page size options, and allows you to provide the list of available page sizes.
  • previousNext - Toggles a set of Previous and Next buttons.
  • info - Toggles the information about the current page and the total number of records.

The following example demonstrates all available options in action.

import { PageChangeEvent } from '@progress/kendo-angular-pager';
import { Component, OnInit, ViewChild, TemplateRef, ViewEncapsulation, ViewContainerRef } from '@angular/core';
import { articles } from './articles';
import { NotificationService } from '@progress/kendo-angular-notification';

@Component({
    selector: 'my-app',
    template: `
        <div class="demo-wrapper">
            <div>
                <div class="checkbox-wrapper">
                    <label><input type="checkbox" kendoCheckBox [(ngModel)]="pageSizes" /> Show page size options</label>
                    <label><input type="checkbox" kendoCheckBox [(ngModel)]="info" /> Show info</label>
                    <label><input type="checkbox" kendoCheckBox [(ngModel)]="prevNext" /> Show previous/next buttons</label>
                </div>
                <label><input type="radio" kendoRadioButton value="numeric" [(ngModel)]="type" /> Numeric buttons</label>
                <label><input type="radio" kendoRadioButton value="input" [(ngModel)]="type" /> Numeric input</label>
            </div>
            <ng-template #template>Article {{notificationText}}.</ng-template>
            <div class="articles-wrapper">
                <span class="articles-title">
                    Trending Articles This Week
                </span>
                <div class="articles-container">
                    <article-component *ngFor="let article of pagedArticles" [article]="article" (showNotification)="this.onShowNotification($event)"></article-component>
                </div>
                <kendo-datapager style="width: 770px"
                    [pageSize]="pageSize"
                    [skip]="skip"
                    [total]="total"
                    [pageSizeValues]="pageSizes"
                    [info]="info"
                    [previousNext]="prevNext"
                    [type]="type"
                    (pageChange)="onPageChange($event)">
                </kendo-datapager>
            </div>
        </div>
    `,
    styleUrls: ['styles.css']
})
export class AppComponent implements OnInit {
    @ViewChild('template', { read: TemplateRef })
    public notificationTemplate: TemplateRef<any>;
    public pageSize = 2;
    public skip = 0;
    public pagedArticles = [];
    public total = articles.length;
    public pageSizes = false;
    public info = true;
    public prevNext = true;
    public type = 'numeric';
    public notificationText: string;

    constructor(private notificationService: NotificationService) {}

    public ngOnInit(): void {
        this.pageData();
    }

    public onPageChange(e: PageChangeEvent): void {
        this.skip = e.skip;
        this.pageSize = e.take;
        this.pageData();
    }

    public onShowNotification(text: string): void {
        this.notificationText = text;
        this.notificationService.show({
            content: this.notificationTemplate,
            hideAfter: 600,
            position: { horizontal: 'center', vertical: 'bottom' },
            animation: { type: 'fade', duration: 400 },
            type: { style: 'info', icon: true }
        });
    }

    private pageData(): void {
        this.pagedArticles = articles.slice(this.skip, this.skip + this.pageSize);
    }
}
// tslint:disable
export const articles = [{
    articleId: 1,
    articleTitle: `How to Make Games for Everyone`,
    articleSubtitle: `Why the new player’s experience matters`,
    articleDate: `Jan 21,  2020`
}, {
    articleId: 2,
    articleTitle: `How to design with love?`,
    articleSubtitle: `7 tips to fall in love with your job.`,
    articleDate: `Feb 24,  2020`
}, {
    articleId: 3,
    articleTitle: `A good designer is an Emotional Polymath — what?`,
    articleSubtitle: `Polymaths describes a person whose expertise spans a significant number of realities.`,
    articleDate: `Jan 16,  2020`
}, {
    articleId: 4,
    articleTitle: `Why Minimalist Logos Are the Best for Big Business`,
    articleSubtitle: `Analyzing logos from giants like Netflix, Youtube, and Google`,
    articleDate: `Feb 20, 2020`
}, {
    articleId: 5,
    articleTitle: `Money, Likes, and Memes Are All the Same Thing`,
    articleSubtitle: `How the token economy has replaced cash with Twitch emotes and Instagram likes`,
    articleDate: `Feb 13, 2020`
}, {
    articleId: 6,
    articleTitle: `From UX to UI development`,
    articleSubtitle: `The transition between the stages of the digital design process`,
    articleDate: `Jan 11, 2020`
}, {
    articleId: 7,
    articleTitle: `7 Things Mentally Strong People Avoid Doing`,
    articleSubtitle: `Become your own mental strength coach`,
    articleDate: `Jan 17, 2020`
}, {
    articleId: 8,
    articleTitle: `How to Solve Your "Lack of Motivation" Problem`,
    articleSubtitle: `Hint: Understand that lack of motivation is a lie.`,
    articleDate: `Mar 5, 2020`
}, {
    articleId: 9,
    articleTitle: `Make it a habit to externalize your design work`,
    articleSubtitle: `Move faster by revealing the process through sketches, whiteboards and by printing your work out`,
    articleDate: `Feb 12, 2020`
}, {
    articleId: 10,
    articleTitle: `Morning Routines That Will Help You Feel More Energized`,
    articleSubtitle: `Skip your cup of coffee and do these instead.`,
    articleDate: `Feb 19, 2020`
}, {
    articleId: 11,
    articleTitle: `What Color is Your Name? A New Synesthesia Tool Will Show You`,
    articleSubtitle: `Here's your chance to see how people with synesthesia perceive letters and numbers`,
    articleDate: `Feb 3, 2020`
}, {
    articleId: 12,
    articleTitle: `When it comes to design, your eyes are way better than maths`,
    articleSubtitle: `A quick look at how mathematics is not the ultimate source of design truth`,
    articleDate: `Feb 22, 2020`
}, {
    articleId: 13,
    articleTitle: `Microinteractions: small details matter`,
    articleSubtitle: `Microinteractions are the small details that exist inside features.`,
    articleDate: `Jan 7, 2020`
}, {
    articleId: 14,
    articleTitle: `Key principles in animation`,
    articleSubtitle: `Animated interfaces are full of life and emotions. Animations add life to static things.`,
    articleDate: `Mar 24, 2020`
}, {
    articleId: 15,
    articleTitle: `The 60-30-10 Rule of Time Management`,
    articleSubtitle: `A simple framework for allocating your time.`,
    articleDate: `Mar 13, 2020`
}, {
    articleId: 16,
    articleTitle: `Real-time mobile UI/UX prototyping with Figma Mirror`,
    articleSubtitle: `Today many design teams are transferring their design system from Sketch and Adobe XD to Figma.`,
    articleDate: `Jan 30, 2020`
}, {
    articleId: 17,
    articleTitle: `5 apps that will turn your mobile phone into a productivity machine`,
    articleSubtitle: `Instead of letting your mobile device become detrimental to your productivity, here are tips to turn your phone into a productivity machine.`,
    articleDate: `Jan 9, 2020`
}, {
    articleId: 18,
    articleTitle: `Lessons I've Learned From Studying Money for 10 Years`,
    articleSubtitle: `Master money, and you'll be able to do more work you enjoy and less work of the bill-paying variety.`,
    articleDate: `Mar 14, 2020`
}, {
    articleId: 19,
    articleTitle: `The 5-Year Rule: How to Create the Future You Want`,
    articleSubtitle: `A proven process for building your dream life`,
    articleDate: `Feb 11, 2020`
}, {
    articleId: 20,
    articleTitle: `Creativity is only impressive when there's restrictions`,
    articleSubtitle: `Why "form follows function" is a valid design principle in today's web design landscape`,
    articleDate: `Feb 18, 2020`
}, {
    articleId: 21,
    articleTitle: `3 areas of focus to becoming a better Product Designer`,
    articleSubtitle: `Close Sketch. Stop browsing Dribbble. Forget color for a second.`,
    articleDate: `Jan 23, 2020`
}, {
    articleId: 22,
    articleTitle: `The secret of usable design`,
    articleSubtitle: `Improving usability through emotional, reflective and visceral design.`,
    articleDate: `Feb 26, 2020`
}, {
    articleId: 23,
    articleTitle: `When You Eat Is More Important Than What You Eat`,
    articleSubtitle: `A practical guide to time-restricted eating`,
    articleDate: `Mar 23, 2020`
}, {
    articleId: 24,
    articleTitle: `Breaking into Design`,
    articleSubtitle: `How to grow as a designer and land your first position in the field`,
    articleDate: `Mar 4, 2020`
}, {
    articleId: 25,
    articleTitle: `What's the Difference Between Brand and Brand Identity`,
    articleSubtitle: `Semantics and the Quest for Truth`,
    articleDate: `Feb 16, 2020`
}];
import { Component, Input, ViewEncapsulation, Output, EventEmitter, HostBinding } from '@angular/core';

@Component({
    selector: 'article-component',
    template: `
        <div class="article-text">
            <h3>{{article.articleTitle}}</h3>
            <p style="font-size: 1em; color: #A1A0A1;">{{article.articleSubtitle}}</p>
            <p style="font-size: 0.8em; color: #afaeaf;">{{article.articleDate}}</p>
            <div style="display: flex;">
                <button
                    kendoButton
                    look="flat"
                    (click)="showNotification.emit('saved for later')">Save for later</button>
                <button
                    kendoButton
                    look="flat"
                    (click)="showNotification.emit('added to favorites')"> Add to favorites</button>
            </div>
        </div>
        <img
            src="https://www.telerik.com/kendo-angular-ui-develop/components/pager/assets/articles/{{article.articleId}}.png"
            alt="{{article.articleTitle}}" />
    `,
    encapsulation: ViewEncapsulation.None,
    styles: [`
        .article {
            position: relative;
            display: flex;
            justify-content: space-between;
            width: 100%;
            height: 180px;
            margin: 0;
            padding: 0;
            border-top: solid;
            border-color: #ECEBEB;
            border-width: thin;
        }
        .article:first-of-type {
            border-top: none;
        }
        .article img {
            height: 140px;
            max-width: 220px;
            align-self: center;
            margin-right: 20px;
        }
        .article-text{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            width: 80%;
            padding: 20px 0 15px 10px;
            line-height: 1.5em;
        }
        .article h3 {
            margin: 0 8px 5px;
            width: 90%;
            color: #454544;
            font-size: 1.1em;
            font-weight: bolder;
        }
        .article p {
            max-width: 90%;
            margin: 0 8px 10px;
        }
        .article button{
            color: #656565;
            font-size: 0.9em;
            margin-right: 20px;
        }
    `]
})

export class ArticleComponent {
    @HostBinding('class.article') public articleClass = true;
    @Input() public article: any;
    @Output() public showNotification = new EventEmitter<string>();
}
.content-container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    overflow: auto;
    height: 470px;
}

.wrapper {
    text-align: center;
}

.demo-wrapper {
    width: 100%;
    overflow-x: auto;
}

.checkbox-wrapper label {
    display: inline-block;
    margin-right: 20px;
}

.title {
    text-transform: uppercase;
    color: #A1A0A1;
    line-height: 50px;
    margin-left: 10px;
}

.contacts-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.contacts-container{
    width:500px;
    height: 211px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    border-style: none solid;
    border-color: #ECEBEB;
    border-width: thin;
    cursor: default;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.articles-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    width: 770px;
}

.articles-container {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 770px;
    height: 340px;
    overflow: auto;
    border-style: none solid;
    border-color: #ECEBEB;
    border-width: thin;
    cursor: default;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.articles-title {
    text-transform: uppercase;
    color: #A1A0A1;
    line-height: 50px;
    padding-left: 18px;
    border: 1px solid #ECEBEB;
    display: inline-block; width: 100%;
}
import { FormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { PagerModule } from '@progress/kendo-angular-pager';
import { InputsModule } from '@progress/kendo-angular-inputs';
import { NotificationModule } from '@progress/kendo-angular-notification';
import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { AppComponent } from './app.component';
import { ArticleComponent } from './article.component';

@NgModule({
    bootstrap:    [AppComponent],
    declarations: [AppComponent, ArticleComponent],
    imports:      [BrowserModule, BrowserAnimationsModule, PagerModule, FormsModule, InputsModule,
        NotificationModule, ButtonsModule]
    })
export class AppModule {}
import { AppModule } from './app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule, { preserveWhitespaces: true });

In this article