Getting Started with Kendo UI for Angular Avatar

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

@Component({
    selector: 'my-app',
    template: `
    <div class="list">
        <div class="contact-list">Contacts</div>
        <div class="contact" *ngFor="let contact of contactInitials">
            <div class="k-hbox">
                <kendo-avatar [shape]="'circle'" [initials]="contact.avatar"></kendo-avatar>
                <div>
                    <h2>{{ contact.name }}</h2>
                    <p>{{ contact.position }}</p>
                </div>
            </div>
        </div>
        <div class="contact" *ngFor="let contact of contactImages">
            <div class="k-hbox">
                <kendo-avatar [shape]="'circle'" [imageSrc]="contact.avatar"></kendo-avatar>
                <div>
                    <h2>{{ contact.name }}</h2>
                    <p>{{ contact.position }}</p>
                </div>
            </div>
        </div>
        <div class="contact">
            <div class="k-hbox">
                <kendo-avatar [shape]="'circle'" [icon]="'user'"> </kendo-avatar>
                <div class="mate-info">
                    <h2>Unknown</h2>
                    <p>Not specified</p>
                </div>
            <div class="k-hbox"></div>
        </div>
    </div>
    `,
    styles: [`
    .contact {
        padding: 8px 14px;
        margin-bottom: 4px;
        box-shadow: 0 1px 2px #ccc;
    }
    .contact h2 {
        font-size: 1.3em;
        font-weight: normal;
        margin: 0;
    }
    .contact p {
        margin: 0;
        font-size: 0.8em;
    }
    .mate-info {
        display: inline-block;
        vertical-align: top;
    }
    .list {
        width: 280px;
        margin: auto;
        padding: 4px 10px;
        box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.26), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.08);
    }
    .contact-list {
        text-align: center;
        padding: 4px;
        font-size: 20px;
    }
    `]
})
export class AppComponent {
    public firstContactImage = 'https://demos.telerik.com/kendo-ui/content/web/Customers/RICSU.jpg';
    public secondContactImage = 'https://demos.telerik.com/kendo-ui/content/web/Customers/GOURL.jpg';

    public contactImages: Array<any> = [
        { avatar: this.firstContactImage, name: 'Michael Holz', position: 'Manager' },
        { avatar: this.secondContactImage, name: 'André Stewart', position: 'Product Manager' }
    ];

    public contactInitials: Array<any> = [
        { avatar: 'JS', name: 'Jason Smith', position: 'UX Designer' },
        { avatar: 'GP', name: 'George Porter', position: 'Software Engineer' }
    ];
}

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 { ButtonsModule } from '@progress/kendo-angular-buttons';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

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

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

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

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);