Getting Started with Kendo UI for Angular Pager

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

@Component({
    selector: 'my-app',
    template: `
        <span class="title">
            Top European Destinations
        </span>
        <div class="wrapper">
            <div class="content-container">
                <destination-component
                    *ngFor="let destination of pagedDestinations"
                    [data]="destination">
                </destination-component>
            </div>
            <kendo-datapager
                [style.width.%]="100"
                [pageSize]="pageSize"
                [skip]="skip"
                [total]="total"
                (pageChange)="onPageChange($event)">
            </kendo-datapager>
        </div>
    `,
    styleUrls: ['styles.css']
})
export class AppComponent implements OnInit {
    public pageSize = 8;
    public skip = 0;
    public pagedDestinations = [];
    public total = destinations.length;

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

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

    private pageData(): void {
        this.pagedDestinations = destinations.slice(this.skip, this.skip + this.pageSize);
    }
}

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

@Component({
    selector: 'destination-component',
    template: `
        <div class="destination">
            <img src="https://www.telerik.com/kendo-angular-ui-develop/components/pager/assets/destinations/{{data.destinationId}}.png"
                alt="{{data.destinationName}}" />
            <h3>{{data.destinationName}}</h3>
            <p>{{data.destinationText}}</p>
        </div>
    `,
    styles: [`
        .destination {
            position: relative;
            width: 170px;
            height: 230px;
            margin-left: 10px;
            padding: 0;
            cursor: default;
            cursor: default;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        .destination img {
            width: 160px;
            height: 150px;
            margin-bottom: 10px;
        }
        .destination h3 {
            margin: 0;
            padding: 3px 5px 0 0;
            max-width: 100%;
            overflow: hidden;
            line-height: 1.1em;
            font-size: .9em;
            font-weight: bolder;
            text-transform: uppercase;
            color: #656565;
        }
        .destination p {
            width: 100%;
            font-size: 0.8em;
            color: #BABABA;
        }
    `]
})

export class DestinationComponent {
    @Input() public data: any;
}

// tslint:disable
export const destinations = [{
    destinationId: 1,
    destinationName: `BRUSSELS, BELGIUM`,
    destinationText: `Chocolate, beer, music and surrealism.`
}, {
    destinationId: 2,
    destinationName: `PORTO, PORTUGAL`,
    destinationText: `Taste it, drink it, eat it, love it. Bem-vindo ao Porto!`
}, {
    destinationId: 3,
    destinationName: `MALAGA, SPAIN`,
    destinationText: `Enjoy the perfect climat.`
}, {
    destinationId: 4,
    destinationName: `BUDAPEST, HUNGARY`,
    destinationText: `One of the most exciting cities in the world.`
}, {
    destinationId: 5,
    destinationName: `BRATISLAVA, SLOVAKIA`,
    destinationText: `A modern city on the Danube.`
}, {
    destinationId: 6,
    destinationName: `FLORENCE, ITALY`,
    destinationText: `Love and culture are everywhere!`
}, {
    destinationId: 7,
    destinationName: `POZNAN, POLAND`,
    destinationText: `A unique heritage with rich cultural offer.`
}, {
    destinationId: 8,
    destinationName: `ATHENS, GREECE`,
    destinationText: `The biggest open-air museum in Europe.`
}, {
    destinationId: 9,
    destinationName: `SOFIA, BULGARIA`,
    destinationText: `One of Europe's oldest cities.`
}, {
    destinationId: 10,
    destinationName: `BORDEAUX, FRANCE`,
    destinationText: `Discover exciting new facets of its character.`
}, {
    destinationId: 11,
    destinationName: `GENEVA, SWITZERLAND`,
    destinationText: `One of the most welcoming cities in Europe.`
}, {
    destinationId: 12,
    destinationName: `RIGA, LATVIA`,
    destinationText: `At the crossroads of various nations and cultures.`
}, {
    destinationId: 13,
    destinationName: `SEVILLE, SPAIN`,
    destinationText: `Seville. Any time of year…`
}, {
    destinationId: 14,
    destinationName: `COLMAR, FRANCE`,
    destinationText: `A condensed version of the Alsace region.`
}, {
    destinationId: 15,
    destinationName: `VIENNA, AUSTRIA`,
    destinationText: `The Giant Ferris Wheel is awaiting you.`
}, {
    destinationId: 16,
    destinationName: `MONTPELLIER, FRANCE`,
    destinationText: `Smart, Mediterranean, attractive, welcoming and festive.`
}, {
    destinationId: 17,
    destinationName: `VALENCIA, SPAIN`,
    destinationText: `Sun, culture, history and future. `
}, {
    destinationId: 18,
    destinationName: `BARCELONA, SPAIN`,
    destinationText: `Barcelona never sleeps.`
}, {
    destinationId: 19,
    destinationName: `MILAN, ITALY`,
    destinationText: `The hub of Italian culture`
}, {
    destinationId: 20,
    destinationName: `GDANSK, POLAND`,
    destinationText: `You'll be amazed by the beauty of Gdansk.`
}, {
    destinationId: 21,
    destinationName: `ROME, ITALY`,
    destinationText: `Treat yourself to a stay in the Eternal City.`
}, {
    destinationId: 22,
    destinationName: `EDINBURGH, SCOTLAND`,
    destinationText: `Shopping, dining & architectural splendour.`
}, {
    destinationId: 23,
    destinationName: `LISBON, PORTUGAL`,
    destinationText: `The pure pleasure of being in one of the best cities in the world.`
}];

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

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

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

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