Components / Layout / Avatar

Appearance

The Avatar allows you to set different renderings of its content.

The available configurations are:

  • Image avatar—By passing the imageSrc property.
  • Initials avatar—By setting the initials property to any given string.
  • Icon avatar—By passing an icon name to the icon property.

All of the options can be rendered in a different shape by setting the shape property.

The available shape values are:

  • circle—Renders a circle shape avatar.
  • rounded—Renders an avatar with rounded borders.
  • square(Default)—Renders a square shape avatar.

The following example demonstrates all appearance options in action.

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

@Component({
    selector: 'my-app',
    template: `
    <form class="k-form">
        <div class="k-form-field">
        <input type="radio" name="group" value="square" id="square" class="k-radio" checked [(ngModel)]="avatarShape" />
        <label class="k-radio-label" for="square">Square</label>

        <input type="radio" name="group" value="rounded" id="rounded" class="k-radio" [(ngModel)]="avatarShape" />
        <label class="k-radio-label" for="rounded">Rounded</label>

        <input type="radio" name="group" value="circle" class="k-radio" id="circle" [(ngModel)]="avatarShape" />
        <label class="k-radio-label" for="circle">Circle</label>
        </div>
    </form>

    <div class="avatar-container">
        <kendo-avatar [imageSrc]="src" width="50px"  height="50px" [shape]="avatarShape" ></kendo-avatar>
        <kendo-avatar [initials]="'JS'" width="50px"  height="50px" [shape]="avatarShape"></kendo-avatar>
        <kendo-avatar [iconClass]="'k-icon k-i-user'" width="50px" height="50px" [shape]="avatarShape"></kendo-avatar>
    </div>
    `,
    encapsulation: ViewEncapsulation.None,
    styles: [`
    .k-avatar-image div {
        width:50px;
        height:50px;
    }
    .avatar-container {
        display:flex;
        justify-content: space-evenly;
    }
    .k-radio {
        margin-left: 16px;
    }
    .k-form {
        display: flex;
        justify-content: center;
        margin-bottom: 15px;
    }`]
})
export class AppComponent {
    public avatarShape = 'square';
    public src = 'https://demos.telerik.com/kendo-ui/content/web/Customers/RICSU.jpg';
}

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);

Custom Content

You can also define any custom content as an avatar between <kendo-avatar> tags.

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

@Component({
    selector: 'my-app',
    template: `
    <form class="k-form">
        <div class="k-form-field">
            <input type="radio" name="group" value="🍓" id="square" class="k-radio" checked [(ngModel)]="avatar" />
            <label class="k-radio-label" for="square">Strawberry</label>

            <input type="radio" name="group" value="🍉" id="rounded" class="k-radio" [(ngModel)]="avatar" />
            <label class="k-radio-label" for="rounded">Watermelon</label>

            <input type="radio" name="group" value="🍒" class="k-radio" id="circle" [(ngModel)]="avatar" />
            <label class="k-radio-label" for="circle">Cherry</label>
        </div>
    </form>
    <div class="avatar-container">
        <kendo-avatar class="user" shape="rounded" width="80px" height="80px">
            <span>{{ avatar }}</span>
        </kendo-avatar>
    </div>
    `,
    styles: [`
    .user {
        background-color: #ccc;
    }
    .k-radio {
        margin-left: 16px;
    }
    .k-form {
        display: flex;
        justify-content: center;
        margin-bottom: 15px;
    }
    .k-avatar span {
        font-size: 50px;
    }
    .avatar-container {
        display: flex;
        justify-content: space-evenly;
    }`]
})
export class AppComponent {
    public avatar = '🍍';
}

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);

In this article