All Components

Templates

The PanelBar allows you to use templates for instantiating its items and for customizing its appearance.

You can use templates for:

Collections

When you use collections to instantiate the PanelBar items and do not define a template, the content property will be rendered in its current state.

@Component({
    selector: 'my-app',
    styles: [`
        .custom-template {
            padding: 30px;
            text-align: center;
        }
    `],
    template: `
        <kendo-panelbar [items]="items">
            <ng-template kendoPanelBarItemTemplate let-dataItem>
                <div class="custom-template">
                    <h4>Custom template: </h4>
                    <p>{{dataItem.content}}</p>
                </div>
            </ng-template>
        </kendo-panelbar>
    `
})

class AppComponent {
    private items: Array<PanelBarItemModel> = [
        <PanelBarItemModel> {title: "First item", content: "First item content", expanded: true },
        <PanelBarItemModel> {title: "Second item", children: [
                <PanelBarItemModel> {title: "Child item" }
            ]
        }
    ];
}

Declaratively Initialized Items

The following example demonstrates how to instantiate PanelBar items by using the declarative approach.

@Component({
    selector: 'my-app',
    styles: [`
        .custom-template {
            padding: 30px;
            text-align: center;
        }
    `],
    template: `
        <kendo-panelbar>
            <kendo-panelbar-item [title]="'Item Title'" [expanded]="true">
                <ng-template kendoPanelBarContent>
                    <div class="custom-template">Item content</div>
                </ng-template>
            </kendo-panelbar-item>
        </kendo-panelbar>
    `
})

class AppComponent { }

Customizing the Appearance of the Title

The following example demonstrates how to use the PanelBarItemTitleDirective.

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

@Component({
    selector: 'my-app',
    template: `
    <div class="panelbar-wrapper">
        <kendo-panelbar>
        <kendo-panelbar-item title="" >
            <ng-template kendoPanelBarItemTitle>
                <span class="fa-stack fa-lg stacked-icon">
                <i class="fa fa-square-o fa-stack-2x"></i>
                <i class="fa fa-money fa-stack-1x"></i>
                </span>
                            Available currencies
            </ng-template>
            <kendo-panelbar-item [iconClass]="'fa fa-btc'" title="Bitcoin"></kendo-panelbar-item>
            <kendo-panelbar-item [iconClass]="'fa fa-eur'" title="EUR"></kendo-panelbar-item>
            <kendo-panelbar-item [iconClass]="'fa fa-usd'" title="USD"></kendo-panelbar-item>
            <kendo-panelbar-item [iconClass]="'fa fa-gbp'" title="GBP"></kendo-panelbar-item>
        </kendo-panelbar-item>
        </kendo-panelbar>
    </div>
    `,
    encapsulation: ViewEncapsulation.None,
    styles: [`
        .panelbar-wrapper {
            max-width: 300px;
            margin: 0 auto;
        }

        .k-panelbar .k-item .k-icon.fa, .k-panelbar .k-item .stacked-icon {
          margin-right: 20px;
        }

    `]
})

class AppComponent { }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
In this article