Getting Started with the Kendo UI for Angular ListView

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

@Component({
    selector: 'my-app',
    template: `
        <kendo-listview
            [data]="contacts"
            [containerClass]="'k-d-flex k-flex-col k-flex-nowrap'"
        >
            <ng-template kendoListViewHeaderTemplate>
                <div class="header">
                    Contact list
                </div>
            </ng-template>
            <ng-template
                kendoListViewItemTemplate
                let-dataItem="dataItem"
                let-isFirst="isFirst"
            >
                <contact-card
                    class="contact"
                    [contact]="dataItem"
                    [borderTop]="!isFirst"
                >
                </contact-card>
            </ng-template>
            <ng-template kendoListViewFooterTemplate>
                <div class="footer">
                    25 unread messages in total
                </div>
            </ng-template>
        </kendo-listview>
    `,
    styles: [`
        .k-listview {
            font-family: sans-serif;
            width: 400px;
            margin: auto;
        }
        .header, .footer {
            color: #A0A0A0;
            font-size: 16px;
            padding: 6px 10px;
        }
        .footer {
            font-size: 14px;
        }
        .contact {
            width: 100%;
        }
    `]
})
export class AppComponent {
    public contacts: any[] = contacts;
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { LayoutModule } from '@progress/kendo-angular-layout';
import { ListViewModule } from '@progress/kendo-angular-listview';

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

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        LayoutModule,
        ListViewModule
    ],
    declarations: [
        AppComponent,
        ContactComponent
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

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

@Component({
    selector: 'contact-card',
    template: `
        <div
            class="contact"
            [class.border-top]="borderTop"
        >
            <kendo-avatar
                [imageSrc]="getImageUrl(contact.id)"
                [shape]="'circle'"
                [width]="40"
                [height]="40"
            >
            </kendo-avatar>
            <div class="contact-details">
                <div class="contact-name">{{ contact.name }}</div>
                <div class="contact-email">{{ contact.email }}</div>
            </div>
            <div class="messages">
                {{ getMessagesText(contact.messagesCount) }}
            </div>
        </div>
    `,
    styles: [`
        .contact{
            display: flex;
            height: 55px;
            padding: 10px;
            align-items: center;
        }
        .contact.border-top {
            border-top: solid;
            border-color: #ECEBEB;
            border-width: thin;
        }
        .contact-details {
            flex: 1;
            margin-left: 10px;
        }
        .contact-name {
            color: #656565;
            font-weight: bolder;
        }
        .contact-email {
            font-size: 0.7rem;
            color: #BEBEBE;
        }
        .messages{
            background-color: #FF6358;
            height: 20px;
            width: 95px;
            border-radius: 3px;
            padding: 2px 5px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #FFFFFF;
            font-size: 0.8em;
            cursor: pointer;
            user-select: none;
        }
    `]
})
export class ContactComponent {
    @Input() public contact: {
        id: number;
        name: string;
        email: string;
        messagesCount: number;
    };

    @Input() public borderTop: boolean;

    public getImageUrl(contactId: number): string {
        return `https://www.telerik.com/kendo-angular-ui-develop/components/listview/assets/contacts/${contactId}.png`;
    }

    public getMessagesText(messagesCount: number): string {
        return `${messagesCount} new message${ messagesCount > 1 ? 's' : '' }`;
    }
}

export const contacts: any[] = [
    {
        id: 1,
        name: 'Jenson Delaney',
        email: 'jenson.delany@mail.com',
        messagesCount: 3
    },
    {
        id: 2,
        name: 'Amaya Coffey',
        email: 'amaya.coffey@mail.com',
        messagesCount: 1
    },
    {
        id: 3,
        name: 'Habib Joyce',
        email: 'habib.joyce@mail.com',
        messagesCount: 5
    },
    {
        id: 4,
        name: 'Lilly-Ann Roche',
        email: 'lilly-ann.roche@mail.com',
        messagesCount: 8
    },
    {
        id: 5,
        name: 'Giulia Haworth',
        email: 'giulia.haworth@mail.com',
        messagesCount: 3
    },
    {
        id: 6,
        name: 'Dawson Humphrey',
        email: 'dawson.humphrey@mail.com',
        messagesCount: 2
    },
    {
        id: 7,
        name: 'Reilly McCullough',
        email: 'reilly.mccullough@mail.com',
        messagesCount: 3
    }
];

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

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