Pager Template

import { PageChangeEvent } from '@progress/kendo-angular-pager';
import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
        <kendo-datapager style="width: 100%;" [pageSize]="pageSize" [skip]="skip" [total]="total" (pageChange)="onPageChange($event)">
            <ng-template kendoDataPagerTemplate let-totalPages="totalPages" let-currentPage="currentPage">
                <kendo-datapager-prev-buttons style="margin-right: 10px;"></kendo-datapager-prev-buttons>
                <kendo-slider
                    [showButtons]="false"
                    tickPlacement="none"
                    [max]="totalPages"
                    [min]="1"
                    (valueChange)="sliderChange($event)"
                    [value]="currentPage">
                </kendo-slider>
                <kendo-datapager-next-buttons style="margin-left: 10px;"></kendo-datapager-next-buttons>
                Page {{currentPage}} of {{totalPages}}
                <kendo-datapager-info></kendo-datapager-info>
            </ng-template>
        </kendo-datapager>
    `
})
export class AppComponent {
    public pageSize = 10;
    public skip = 0;
    public total = 100;

    public sliderChange(pageIndex: number): void {
        this.skip = (pageIndex - 1) * this.pageSize;
    }

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

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 { AppComponent } from './app.component';

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

import { AppModule } from './app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

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