Hierarchical Drawer
The Drawer works with a flat structure of items by design. However, many real-world scenarios require navigation with a hierarchical structure.
To achieve this behavior, define parent-child relationships in the Drawer items data. This is demonstrated in the example below.
Setup
To achieve a hierarchical items structure, follow the steps below:
-
Add an
id
to each item in the Draweritems
collection. It is used internally as a unique identifier for each item.tspublic items: Array<DrawerItem> = [ { id: 0, text: 'Inbox', icon: 'k-i-inbox', selected: true }, { id: 1, text: 'Notifications', icon: 'k-i-bell' } ]
-
To render an item as a nested child of another one, add the
parentId
field to it. Its value should be theid
of the corresponding parent item. It is used internally by the Drawer to map existing parent-child relationships. Items without aparentId
field will be rendered as root-level items, and items with aparentId
field will be considered nested child items.The Drawer supports up to 5 levels of nested items.
tspublic items: Array<DrawerItem> = [ { id: 0, text: 'Inbox', icon: 'k-i-inbox', selected: true }, { id: 1, parentId: 0, text: 'Notifications', icon: 'k-i-bell' } ]
-
Set the
isItemExpanded
input of the Drawer. It accepts a boolean callback function, which is executed for each Drawer item and determines its expanded state.If an
isItemExpanded
callback is not provided, all Drawer items will be rendered as collapsed. This means that only root level items will be visible.ts// Collection with the indices of all expanded items public expandedIndices = [0]; // Predicate function, which determines if an item is expanded public isItemExpanded = (item: any): boolean => { return this.expandedIndices.indexOf(item.id) >= 0; }
-
Lastly, handle the
select event
of the Drawer and include the required custom logic for expanding or collapsing the selected item.tspublic onSelect(ev: DrawerSelectEvent): void { this.selected = ev.item.text; const current = ev.item.id; if (this.expandedIndices.indexOf(current) >= 0) { this.expandedIndices = this.expandedIndices.filter( (id) => id !== current ); } else { this.expandedIndices.push(current); } }