Expandable panel

The expandable panel component is responsible for showing and hiding context information.

The expandable panel component provides basic expand/collapse functionality without any styling. The expandable trigger directive dtExpandablePanel allows you to bind a custom element as trigger to an expandable panel <dt-expandable-panel>. The expandable trigger binds to key and click events.

´ Loading interactive demo...
<dt-expandable-panel #panel> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </dt-expandable-panel> <button dt-button [dtExpandablePanel]="panel"> Toggle expandable panel </button> export class ExpandablePanelDefaultExample {} <dt-expandable-panel #panel> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </dt-expandable-panel> <button dt-button [dtExpandablePanel]="panel"> Toggle expandable panel </button> export class ExpandablePanelDefaultExample {}

Note: In version 5.0.0 the selector for the panel's trigger will be updated to button[dtExpandablePanel], then only a button element can be used as expandable panel trigger.

Imports

You have to import the DtExpandablePanelModule when you want to use the dt-expandable-panel. The dt-expandable-panel component also requires Angular's BrowserAnimationsModule for animations. For more details on this see Step 2: Animations in the getting started guide.

@NgModule({
  imports: [DtExpandablePanelModule, BrowserAnimationsModule],
})
class MyModule {}

Initialization

To apply the Dynatrace expandable panel, use the <dt-expandable-panel> element.

Attribute Description
dt-expandable-panel The expandable panel, with the behaviour, but without styling
[dtExpandablePanel]=#panel The expandable trigger which listens on click and key events. The trigger needs to get a panel assigned.

Inputs

Name Type Default Description
expanded boolean false Sets or gets the panel's expanded state.
disabled boolean false Sets or gets the panel's disabled state.

Outputs

Name Type Description
expandChange EventEmitter<boolean> Emits an event when the expanded state changes.
expanded EventEmitter<void> Event emitted when the panel is expanded.
collapsed EventEmitter<void> Event emitted when the panel is collapsed.

Properties

Name Type Description
toggle boolean Toggles the expanded state, i.e. changes it to expanded if collapsed, or vice-versa.
open void Expands the panel.
close void Collapses the panel.

Expandable trigger input

Name Type Default Description
dtExpandablePanel DtExpandablePanel undefined Attaches an expandable panel to this trigger.

Expandable panel in use

Disabled

The expandable panel can be disabled, which also disables the trigger button.

´ Loading interactive demo...
<dt-expandable-panel #panel disabled [expanded]="true"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </dt-expandable-panel> <button dt-button [dtExpandablePanel]="panel"> Toggle expandable panel </button> export class ExpandablePanelDisabledExample {} <dt-expandable-panel #panel disabled [expanded]="true"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </dt-expandable-panel> <button dt-button [dtExpandablePanel]="panel"> Toggle expandable panel </button> export class ExpandablePanelDisabledExample {}

Dynamic trigger

The expandable panel's trigger can be updated according to the panel's current state.

´ Loading interactive demo...
<dt-expandable-panel #panel> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </dt-expandable-panel> <button dt-button [dtExpandablePanel]="panel"> Toggle trigger ( <span *ngIf="panel.expanded">close panel</span> <span *ngIf="!panel.expanded">open panel</span> ) </button> export class ExpandablePanelDynamicTriggerExample {} <dt-expandable-panel #panel> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </dt-expandable-panel> <button dt-button [dtExpandablePanel]="panel"> Toggle trigger ( <span *ngIf="panel.expanded">close panel</span> <span *ngIf="!panel.expanded">open panel</span> ) </button> export class ExpandablePanelDynamicTriggerExample {}

Programmatic trigger

The expandable panel can be opened/closed/toggled programmatically.

´ Loading interactive demo...
<dt-expandable-panel #panel [expanded]="true"> {{ text }} </dt-expandable-panel> <button dt-button (click)="panel.toggle()">Toggle panel</button> <button dt-button (click)="panel.open()" [disabled]="panel.expanded"> Open panel </button> <button dt-button (click)="panel.close()" [disabled]="!panel.expanded"> Close panel </button> export class ExpandablePanelProgrammaticExample { text = `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.`; } <dt-expandable-panel #panel [expanded]="true"> {{ text }} </dt-expandable-panel> <button dt-button (click)="panel.toggle()">Toggle panel</button> <button dt-button (click)="panel.open()" [disabled]="panel.expanded"> Open panel </button> <button dt-button (click)="panel.close()" [disabled]="!panel.expanded"> Close panel </button> export class ExpandablePanelProgrammaticExample { text = `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.`; }