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.

<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>

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.
id string dt-expandable-panel-{rollingNumber} Sets the id of the expandable panel.

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.

<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>

Dynamic trigger

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

<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>

Programmatic trigger

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

<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>