Component
Panel
A titled, optionally collapsible container. Give it a header and content, choose whether the icon or the whole header toggles it, position the caret, drive the collapsed state, and template the header, actions, indicator, and footer.
Collapsible panel
Photo details
Oak leaves along the trail — taken in Freiburg, November 2026. A cool, misty morning.
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { HbPanelImports } from '@herbst/ui';
@Component({
selector: 'hb-demo-panel-basic',
imports: [HbPanelImports],
template: `
<hb-panel class="w-full max-w-md" hbHeader="Photo details" hbToggleable>
<p class="text-sm text-muted-foreground">
Oak leaves along the trail — taken in Freiburg, November 2026. A cool, misty morning.
</p>
</hb-panel>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HbDemoPanelBasicComponent {}
Toggler, icon position & disabled
Click anywhere on the header
The whole header is the toggle, and the caret sits at the start.
collapsed = true
Disabled — cannot toggle
This panel is locked open.
Header, actions, indicator & footer
Black Forest
Oak leaves along the trail. A cool, misty morning near Freiburg on 3 November.
Updated November 2026
API reference
hb-panel
| Property | Description | Type | Default |
|---|---|---|---|
| [hbHeader] | The header text. Ignored when an hbPanelHeader template is provided. | string | '' |
| [hbToggleable] | Enable collapsing. Without it the panel is a static container. | boolean | false |
| [(hbCollapsed)] | The collapsed state, two-way bound. | boolean | false |
| [hbToggler] | What toggles the panel: just the caret button, or the entire header. | 'icon' | 'header' | 'icon' |
| [hbIconPos] | Place the toggle caret at the start or the end of the header. | 'start' | 'end' | 'end' |
| [hbToggleIcon] / [hbDisabled] | Override the caret icon, and lock the panel so it cannot toggle. | string / boolean | 'phosphorCaretDown' / false |
| (hbToggle) | Emits the new collapsed state each time it toggles. | boolean | — |
Template slots
| Property | Description | Type | Default |
|---|---|---|---|
| ng-template[hbPanelHeader] | Custom header content, replacing the hbHeader text. | template | — |
| ng-template[hbPanelIcons] | Action controls on the right of the header (their clicks do not toggle the panel). | template | — |
| ng-template[hbPanelIndicator] | Custom toggle indicator. Context: $implicit = collapsed, collapsed. | template | — |
| ng-template[hbPanelFooter] | Footer content shown below the projected body, inside the collapsible region. | template | — |