Getting Started with Kendo UI for Angular PanelBar

The PanelBar displays hierarchical data as a multi-level, expandable component.

You can describe the children items:

• By using nested PanelBarItem components, or
• By using the items property.

Basic Usage

The following example demonstrates the PanelBar in action.

Functionality and Features

• Data binding
• Items
• Expand modes
• Templates
• Animations
• Routing
• Globalization
• Keyboard navigation
• Accessibility

Events

The following example demonstrates basic PanelBar events.

Copy Code@Component({
    selector: 'my-app',
    styles: [`
        .custom-template {
            padding: 30px;
            text-align: center;
        }
    `],
    template: `
        <kendo-panelbar [items]="items" (stateChange)="onPanelChange($event)">
            <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: "Item content", expanded: true },
        <PanelBarItemModel> {title: "Second item", children: [
                <PanelBarItemModel> {title: "Child item" }
            ]
        }
    ];

    public onPanelChange(event: any) { console.log("stateChange: ", event); }
}

Suggested Links

• API Reference of the PanelBar
• API Reference of the PanelBarItem