Layout Overview

The Layout components create a perceptive and intuitive layout of web projects to provide for an easier navigation.

Basic Usage

The following example demonstrates all available Layout components in action.

import { Component, ViewEncapsulation } from '@angular/core';
import { DrawerSelectEvent } from '@progress/kendo-angular-layout';
@Component({
    selector: 'my-app',
    template: `
    <div class="custom-toolbar">
        <button
            kendoButton
            icon="layout"
            look="flat"
            (click)="drawer.toggle()"
        >
            <span class="mail-box">Drawer component</span>
        </button>
    </div>
    <kendo-drawer-container>
        <kendo-drawer
            #drawer
            [items]="items"
            [mode]="'push'"
            [mini]="true"
            [expanded]="true"
            (select)="onSelect($event)"
        >
        </kendo-drawer>
        <kendo-drawer-content>
            <layout-component [selectedItem]="selected"></layout-component>
        </kendo-drawer-content>
    </kendo-drawer-container>
    `,
    encapsulation: ViewEncapsulation.None,
    styles: [`
    my-app {
        padding: 0;
    }
    kendo-drawer-container {
        position: fixed;
        width: 100%;
        height: 100%;
    }
    .custom-toolbar {
        width: 100%;
        background-color: #f6f6f6;
        line-height: 10px;
        border-bottom: inset;
        border-bottom-width: 1px;
        padding: 3px 8px;
        color: #656565;
    }
    .mail-box {
        font-weight: bold;
        font-size: 17px;
    }
`]
})
export class AppComponent {
    public selected = 'Avatar';

    public items: Array<any> = [
        { text: 'Avatar', icon: 'k-i-user', selected: true },
        { separator: true },
        { text: 'Card', icon: 'k-i-image' },
        { separator: true },
        { text: 'PanelBar', icon: 'k-i-menu' },
        { separator: true },
        { text: 'Splitter', icon: 'k-i-arrows-resizing' },
        { separator: true },
        { text: 'Stepper', icon: 'k-i-list-numbered' },
        { separator: true },
        { text: 'TabStrip', icon: 'k-i-thumbnails-up' }
    ];

    public onSelect(ev: DrawerSelectEvent): void {
        this.selected = ev.item.text;
    }
}
import { Component } from '@angular/core';

@Component({
    selector: 'avatar-component',
    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 AvatarComponent {
    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 { Component, ViewEncapsulation } from '@angular/core';

@Component({
    selector: 'card-component',
    template: `
        <div class="card-list">
            <div *ngFor="let card of scrollViewCards">
                <scrollview-card [card]="card"></scrollview-card>
            </div>
        </div>
    `,
    styles: [`
        .card-list {
            display: flex;
            justify-content: space-evenly;
            flex-wrap: wrap;
        }
        .k-textarea {
            resize: none;
        }
        .comment-box {
            display: flex;
            flex-direction: column;
        }
        .card-comment-wrapper .box {
            display: flex;
            justify-content: space-between;
        }
        .card-post-comment-wrapper {
            padding: 16px 16px 0;
        }
        .card-comment-wrapper {
            margin-bottom: 8px;
            padding: 0 16px;
        }
        .card-comment-container {
            padding: 4px 0;
            align-items: center;
            display: flex;
        }
        .comment-box .comment-text {
            font-size: 13px;
            font-weight: bold;
            max-width: 100px;
        }
        .comment-box span {
            font-size: 10px;
            font-weight: normal;
            word-break: break-all;
        }
        .time span {
            margin-left: 8px;
        }
        .box .k-button-icon {
            font-size: 16px;
            align-self: center;
        }
        .post-likes-count {
            font-size: 13px;
            align-self: center;
            color: #656565;
        }
        .k-button.k-flat:focus::after {
            display: none;
        }
        .k-button {
            outline: none;
        }
        .k-button .k-i-heart {
            color: #ff6358;
        }
        .k-card-subtitle .k-icon {
            vertical-align: baseline;
            font-size: 12px;
        }
        .k-card-header .k-card-title+.k-card-subtitle {
            margin-top: 0;
        }
        .k-card-title {
            margin-bottom: 4px;
        }
        .k-card-media li img {
            width: 285px;
        }
        comment-actions {
            width: 100%;
            display: flex;
            justify-content: space-between;
        }
        .k-card-action {
            flex: 0 0 auto;
        }
    `],
    encapsulation: ViewEncapsulation.None
})
export class CardComponent {
    public scrollViewCards: Array<any> = [
        {
            thumbnailSrc: 'https://www.telerik.com/kendo-angular-ui-develop/components/layout/card/assets/bg_flag.jpg',
            headerTitle: 'bg_traditions',
            headerSubtitle: 'Bulgaria, Europe',
            commentsExpanded: false,
            postLiked: false,
            comments: [],
            newCommentTextValue: '',
            postLikes: 674,
            scrollViewItems: [
                { url: 'https://www.telerik.com/kendo-angular-ui-develop/components/layout/card/assets/kukeri.jpg' },
                { url: 'https://www.telerik.com/kendo-angular-ui-develop/components/layout/card/assets/martenitsa.jpg' },
                { url: 'https://www.telerik.com/kendo-angular-ui-develop/components/layout/card/assets/rose_festival.jpg' }
            ]
        },
        {
            thumbnailSrc: 'https://www.telerik.com/kendo-angular-ui-develop/components/layout/card/assets/rila_lakes.jpg',
            headerTitle: 'bg_mountains',
            headerSubtitle: 'Bulgaria, Europe',
            commentsExpanded: false,
            postLiked: false,
            comments: [],
            newCommentTextValue: '',
            postLikes: 962,
            scrollViewItems: [
                { url: 'https://www.telerik.com/kendo-angular-ui-develop/components/layout/card/assets/rila.jpg' },
                { url: 'https://www.telerik.com/kendo-angular-ui-develop/components/layout/card/assets/pamporovo.jpg' },
                { url: 'https://www.telerik.com/kendo-angular-ui-develop/components/layout/card/assets/camping.jpg' }
            ]
        }
    ];

    constructor() { /**/ }
}
import { Component, Input } from '@angular/core';

@Component({
    selector: 'scrollview-card',
    template: `
        <kendo-card [width]="'260px'">
            <kendo-card-header class="k-hbox">
                <kendo-avatar width="40px" height="40px" [imageSrc]="card.thumbnailSrc" [shape]="'circle'"></kendo-avatar>
                <div>
                    <h1 kendoCardTitle>{{ card.headerTitle }}</h1>
                    <p kendoCardSubtitle>{{ card.headerSubtitle }}</p>
                </div>
            </kendo-card-header>

            <kendo-scrollview
                *ngIf="card.scrollViewItems"
                kendoCardMedia
                [data]="card.scrollViewItems"
                [width]="'100%'"
                [height]="'185px'"
                [arrows]="false"
                [pageable]="true">
                <ng-template let-item="item">
                    <img src='{{ item.url }}' alt='{{ item.title }}' [ngStyle]="{ minWidth: '100%' }" draggable="false" />
                </ng-template>
            </kendo-scrollview>

            <kendo-card-actions>
                <comment-actions [card]="card"></comment-actions>
            </kendo-card-actions>

            <hr kendoCardSeparator *ngIf="card.comments.length && card.commentsExpanded">
            <kendo-card-body *ngIf="card.commentsExpanded">
                <post-comment [card]="card"></post-comment>
            </kendo-card-body>
        </kendo-card>
    `
})
export class ScrollViewCardComponent {
    @Input() public card: any;
}
import { Component, Input } from '@angular/core';

import { CardComponent } from '@progress/kendo-angular-layout';

@Component({
    selector: 'post-comment',
    template: `
        <div *ngIf="card.comments.length">
            <div class="card-comment-wrapper">
                <div class="box" *ngFor="let comment of card.comments">
                    <div class="card-comment-container">
                        <kendo-avatar
                            class="card-comment-thumbnail"
                            [initials]="'EG'"
                            [shape]="'circle'"
                            [cssStyle]="{ color: 'white' }"
                        >
                        </kendo-avatar>
                        <div class="comment-box">
                            <span class="comment-text">{{ comment.text }}</span>
                            <span class="time">1s ago<span>{{ comment.likes }} like</span></span>
                        </div>
                    </div>
                    <button class="k-button k-flat" (click)="commentLikesCount(comment)">
                        <span [ngClass]="commentHeartIcon(comment)"></span>
                    </button>
                </div>
            </div>
        </div>
        <div class="k-hbox card-post-comment-wrapper">
            <textarea class="k-textarea" placeholder="Comment..." [(ngModel)]="card.newCommentTextValue"></textarea>
            <button class="k-button k-primary k-flat" (click)="postComment(card)">Post</button>
        </div>
    `
})
export class PostCommentComponent {
    @Input() public card: CardComponent;

    public commentLikesCount(comment: any): void {
        if (comment.likes > 0) {
            comment.likes -= 1;
        } else {
            comment.likes += 1;
        }
    }

    public commentHeartIcon(comment: any): string {
        if (comment && comment.likes > 0) {
            return 'k-icon k-i-heart';
        } else {
            return 'k-icon k-i-heart-outline';
        }
    }

    public postComment(card: CardComponent): void {
        if (card.newCommentTextValue) {
            const comment = { text: card.newCommentTextValue, likes: 0 };
            card.comments.push(comment);
            card.newCommentTextValue = '';
        }
    }
}
import { Component, Input } from '@angular/core';

import { CardComponent } from '@progress/kendo-angular-layout';

@Component({
    selector: 'comment-actions',
    template: `
        <div>
            <button class="k-button k-flat" (click)="postLikesCount(card)">
                <span [ngClass]="postHeartIcon(card)"></span>
            </button>
            <button class="k-button k-flat" (click)="commentClick(card)">
                <span class="k-icon k-i-comment"></span>
            </button>
            <button class="k-button k-flat"><span class="k-icon k-i-share"></span></button>
        </div>
        <span class="post-likes-count">{{ card.postLikes }} likes</span>
    `
})
export class CommentActionsComponent {
    @Input() public card: CardComponent;

    public commentClick(card: CardComponent): void {
        card.commentsExpanded = !card.commentsExpanded;
    }

    public postLikesCount(card: CardComponent): void {
        if (card.postLiked) {
            card.postLikes -= 1;
        } else {
            card.postLikes += 1;
        }

        card.postLiked = !card.postLiked;
    }

    public postHeartIcon(card: CardComponent): string {
        return card.postLiked ? 'k-icon k-i-heart' : 'k-icon k-i-heart-outline';
    }
}
import { Component, Input, ViewEncapsulation } from '@angular/core';

@Component({
    selector: 'layout-component',
    template: `
        <div class="header">
            <h5>{{ selectedItem }} component</h5>
        </div>
        <div class="content" id="Avatar" *ngIf="selectedItem === 'Avatar'">
            <avatar-component></avatar-component>
        </div>
        <div class="content" id="Card" *ngIf="selectedItem === 'Card'">
            <card-component></card-component>
        </div>
        <div class="content" id="PanelBar" *ngIf="selectedItem === 'PanelBar'">
            <panelbar-component></panelbar-component>
        </div>
        <div class="content" id="Splitter" *ngIf="selectedItem === 'Splitter'">
            <splitter-component></splitter-component>
        </div>
        <div class="content" id="Stepper" *ngIf="selectedItem === 'Stepper'">
            <stepper-component></stepper-component>
        </div>
        <div class="content" id="TabStrip" *ngIf="selectedItem === 'TabStrip'">
            <tabstrip-component></tabstrip-component>
        </div>
    `,
    encapsulation: ViewEncapsulation.None,
    styles: [`
    .content {
        padding: 40px 20px;
    }
    .header {
        padding: 20px;
        text-align: center;
    }
    `]
})
export class LayoutComponent {
    @Input() public selectedItem: string;
}
import { Component } from '@angular/core';

@Component({
    selector: 'panelbar-component',
    template: `
        <div class="panelbar-wrapper">
            <kendo-panelbar>
                <kendo-panelbar-item [title]="'My Teammates'" expanded="true">
                    <ng-template kendoPanelBarContent>
                        <div>
                            <div class="teamMate">
                                <img [src]="imageUrl('andrew')" alt="Andrew Fuller" />
                                <span class="mate-info">
                                    <h2>Andrew Fuller</h2>
                                    <p>Team Lead</p>
                                </span>
                            </div>
                            <div class="teamMate">
                                <img [src]="imageUrl('nancy')" alt="Nancy Leverling" />
                                <span class="mate-info">
                                    <h2>Nancy Leverling</h2>
                                    <p>Sales Associate</p>
                                </span>
                            </div>
                            <div class="teamMate">
                                <img [src]="imageUrl('robert')" alt="Robert King" />
                                <span class="mate-info">
                                    <h2>Robert King</h2>
                                    <p>Business System Analyst</p>
                                </span>
                            </div>
                        </div>
                    </ng-template>
                </kendo-panelbar-item>
                <kendo-panelbar-item [title]="'Projects'">
                    <kendo-panelbar-item [title]="'New Business Plan'"></kendo-panelbar-item>
                    <kendo-panelbar-item [title]="'Sales Forecasts'">
                        <kendo-panelbar-item [title]="'Q1 Forecast'"></kendo-panelbar-item>
                        <kendo-panelbar-item [title]="'Q2 Forecast'"></kendo-panelbar-item>
                        <kendo-panelbar-item [title]="'Q3 Forecast'"></kendo-panelbar-item>
                        <kendo-panelbar-item [title]="'Q4 Forecast'"></kendo-panelbar-item>
                    </kendo-panelbar-item>
                    <kendo-panelbar-item [title]="'Sales Reports'"></kendo-panelbar-item>
                </kendo-panelbar-item>
                <kendo-panelbar-item [title]="'Programs'">
                    <kendo-panelbar-item [title]="'Monday'"></kendo-panelbar-item>
                    <kendo-panelbar-item [title]="'Tuesday'"></kendo-panelbar-item>
                    <kendo-panelbar-item [title]="'Wednesday'"></kendo-panelbar-item>
                    <kendo-panelbar-item [title]="'Thursday'"></kendo-panelbar-item>
                    <kendo-panelbar-item [title]="'Friday'"></kendo-panelbar-item>
                </kendo-panelbar-item>
                <kendo-panelbar-item [title]="'Communication'" [disabled]="true"></kendo-panelbar-item>
            </kendo-panelbar>
        </div>
    `,
    styles: [`
    .teamMate:after {
        content: ".";
        display: block;
        height: 0;
        line-height: 0;
        clear: both;
        visibility: hidden;
    }
    .teamMate h2 {
        font-size: 1.3em;
        font-weight: normal;
        padding-top: 17px;
        margin: 0;
    }
    .teamMate p {
        margin: 0;
        font-size: 0.8em;
    }
    .teamMate img {
        display: inline-block;
        vertical-align: top;
        width: 50px;
        height: 50px;
        margin: 10px;
        border: 1px solid #ccc;
        border-radius: 50%;
    }
    .mate-info {
        display: inline-block;
        vertical-align: top;
    }
    .panelbar-wrapper {
        max-width: 300px;
        margin: 0 auto;
    }
    `]
})
export class PanelBarComponent {
    private baseImageUrl = 'https://demos.telerik.com/kendo-ui/content/web/panelbar/';
    private imageUrl(imageName: string) {
        return this.baseImageUrl + imageName + '.jpg';
    }
}
import { Component } from '@angular/core';

@Component({
    selector: 'splitter-component',
    template: `
        <kendo-splitter orientation="vertical" style="height: 340px;">
            <kendo-splitter-pane>
                <kendo-splitter>
                <kendo-splitter-pane [collapsible]="true" size="30%">
                    <div class="pane-content">
                    <h3>Inner splitter / left pane</h3>
                    <p>Resizable and collapsible.</p>
                    </div>
                </kendo-splitter-pane>
                <kendo-splitter-pane>
                    <div class="pane-content">
                    <h3>Inner splitter / center pane</h3>
                    <p>Resizable only.</p>
                    </div>
                </kendo-splitter-pane>
                <kendo-splitter-pane [collapsible]="true" size="30%">
                    <div class="pane-content">
                    <h3>Inner splitter / right pane</h3>
                    <p>Resizable and collapsible.</p>
                    </div>
                </kendo-splitter-pane>
                </kendo-splitter>
            </kendo-splitter-pane>
            <kendo-splitter-pane size="100px">
                <div class="pane-content">
                <h3>Outer splitter / Middle pane</h3>
                <p>Resizable only.</p>
                </div>
            </kendo-splitter-pane>
            <kendo-splitter-pane [resizable]="false" size="100px">
                <div class="pane-content">
                <h3>Outer splitter / Bottom pane</h3>
                <p>Non-resizable and non-collapsible.</p>
                </div>
            </kendo-splitter-pane>
        </kendo-splitter>
    `,
    styles: [`
    .pane-content {
        padding: 0 10px;
    }
    h3 {
        font-size: 1.2em;
        margin: 10px 0;
        padding: 0;
    }
    p {
        margin: 0;
        padding: 0;
    }
    `]
})
export class SplitterComponent { }
import { Component } from '@angular/core';

@Component({
    selector: 'stepper-component',
    template: `
        <kendo-stepper
            [steps]="steps"
            [stepType]="'full'"
            [(currentStep)]="current"
            [linear]="false"
            [style.width.px]="570">
        </kendo-stepper>
    `
})
export class StepperComponent {
    public current = 1;

    public steps = [
        { label: 'Personal Info', icon: 'user' },
        { label: 'Education', icon: 'dictionary-add' },
        { label: 'Attachments', icon: 'attachment', optional : true },
        { label: 'Preview', icon: 'preview' },
        { label: 'Submit', icon: 'file-add' }
    ];
}
import { Component } from '@angular/core';

@Component({
    selector: 'tabstrip-component',
    template: `
        <kendo-tabstrip (tabSelect)="onTabSelect($event)">
            <kendo-tabstrip-tab [title]="'Paris'" [selected]="true">
            <ng-template kendoTabContent>
                <p>
                    Paris is the capital and most populous city of France. It has an
                    area of 105 square kilometres (41 square miles) and a population in
                    2013 of 2,229,621 within its administrative limits. The city is both
                    a commune and department, and forms the centre and headquarters of
                    the Île-de-France, or Paris Region, which has an area of 12,012
                    square kilometres (4,638 square miles) and a population in 2014 of
                    12,005,077, comprising 18.2 percent of the population of France.
                </p>
            </ng-template>
            </kendo-tabstrip-tab>
            <kendo-tabstrip-tab [title]="'New York City'">
                <ng-template kendoTabContent>
                <p>
                    The City of New York, often called New York City or simply New York,
                    is the most populous city in the United States. With an estimated
                    2015 population of 8,550,405 distributed over a land area of just
                    305 square miles (790 km2), New York City is also the most densely
                    populated major city in the United States. Located at the southern
                    tip of the state of New York, the city is the center of the New York
                    metropolitan area, one of the most populous urban agglomerations in
                    the world.
                </p>
                <p>
                    A global power city, New York City exerts a significant impact upon
                    commerce, finance, media, art, fashion, research, technology,
                    education, and entertainment, its fast pace defining the term New
                    York minute. Home to the headquarters of the United Nations, New
                    York is an important center for international diplomacy and has been
                    described as the cultural and financial capital of the world.
                </p>
                </ng-template>
            </kendo-tabstrip-tab>
            <kendo-tabstrip-tab [title]="'Tallinn'">
                <ng-template kendoTabContent>
                    <p>
                        Tallinn is the capital and largest city of Estonia. It is situated
                        on the northern coast of the country, on the shore of the Gulf of
                        Finland, 80 km (50 mi) south of Helsinki, east of Stockholm and west
                        of Saint Petersburg. From the 13th century until 1918 (and briefly
                        during the Nazi occupation of Estonia from 1941 to 1944), the city
                        was known as Reval. Tallinn occupies an area of 159.2 km2 (61.5 sq
                        mi) and has a population of 443,894. Approximately 32% of Estonia's
                        total population lives in Tallinn.
                    </p>
                    <p>
                        Tallinn was founded in 1248, but the earliest human settlements are
                        over 5,000 years old, making it one of the oldest capital cities of
                        Northern Europe. Due to its strategic location, the city became a
                        major trade hub, especially from the 14th to the 16th century, when
                        it grew in importance as part of the Hanseatic League.
                    </p>
                </ng-template>
            </kendo-tabstrip-tab>
            <kendo-tabstrip-tab [title]="'Sydney'" [disabled]="true" ></kendo-tabstrip-tab>
        </kendo-tabstrip>
    `,
    styles: [`
    kendo-tabstrip p {
        margin: 0;
        padding: 8px;
    }
    `]
})
export class TabStripComponent {
    public onTabSelect(e) {
        console.log(e);
    }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';

import { LayoutModule } from '@progress/kendo-angular-layout';
import { ButtonsModule } from '@progress/kendo-angular-buttons';

import { LayoutComponent } from './layout.component';
import { AvatarComponent } from './avatar.component';
import { CardComponent } from './card.component';
import { CommentActionsComponent } from './comment-actions.component';
import { PostCommentComponent } from './comment.component';
import { PanelBarComponent } from './panelbar.component';
import { ScrollViewCardComponent } from './scrollview-card.component';
import { SplitterComponent } from './splitter.component';
import { StepperComponent } from './stepper.component';
import { TabStripComponent } from './tabstrip.component';

import { ScrollViewModule } from '@progress/kendo-angular-scrollview';

import { AppComponent } from './app.component';
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        LayoutModule,
        ButtonsModule,
        ScrollViewModule,
        FormsModule,
        CommonModule,
        LayoutModule
    ],
    declarations: [
        AppComponent,
        AvatarComponent,
        CardComponent,
        CommentActionsComponent,
        LayoutComponent,
        PanelBarComponent,
        PostCommentComponent,
        ScrollViewCardComponent,
        SplitterComponent,
        StepperComponent,
        TabStripComponent
    ],
    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);

Installation

Either use the quick setup (Angular CLI v6 or later) or manually add the package (Angular CLI v5 or earlier).

Quick Setup with Angular CLI v6 or Later

Angular CLI v6 supports the addition of packages through the ng add command which executes in one step the set of otherwise individually needed commands.

ng add @progress/kendo-angular-layout

Manual Setup

All components that you reference during the installation will be present in the final bundle of your application. To avoid ending up with components you do not actually need, either:

  • Import all Layout components at once by using the LayoutModule, or
  • Import a specific Layout component by adding it as an individual NgModule.

  1. Download and install the package.

    npm install --save @progress/kendo-angular-layout @progress/kendo-angular-l10n @progress/kendo-angular-common @progress/kendo-angular-progressbar
  2. Once installed, import the NgModule of the components you need.

    To get all package components, import the LayoutModule in your application root or feature module.

    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 { AppComponent } from './app.component';
    
       @NgModule({
           bootstrap:    [AppComponent],
           declarations: [AppComponent],
           imports:      [BrowserModule, BrowserAnimationsModule, LayoutModule]
       })
       export class AppModule {
       }

    The package also exports the following modules for individual components:

    • AvatarModule
    • CardModule
    • DrawerModule
    • PanelBarModule
    • SplitterModule
    • StepperModule
    • TabStripModule

    To reduce the size of your application, include only the ones you need.

    import { NgModule } from '@angular/core';
       import { BrowserModule } from '@angular/platform-browser';
       import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
       import { AppComponent } from './app.component';
    
       // Imports the PanelBar
       import { PanelBarModule } from '@progress/kendo-angular-layout';
    
       @NgModule({
           bootstrap: [AppComponent],
           declarations: [AppComponent],
           imports: [BrowserModule, BrowserAnimationsModule, PanelBarModule]
       })
       export class AppModule {}
  3. You are required to install one of the Kendo UI themes for Angular to style your components. For more information on how to add the styles, refer to the section on styling.

Dependencies

The Layout requires you to install the following peer dependencies in your application:

  • @angular/animations
  • @angular/common
  • @angular/core
  • @progress/kendo-angular-l10n
  • @progress/kendo-angular-common
  • @progress/kendo-angular-progressbar
  • rxjs

The Layout package utilizes the Angular animation system, which supports a specific set of browsers.

In this article