Expandable text

This Angular component provides basic expand/collaps functionality for inline-text without any styling.

´ Loading interactive demo...
With automatic monitoring enabled, you can create rules that define exceptions to automatic process detection and monitoring. With automatic monitoring disabled, you can define rules that identify specific processes that should be monitored. Rules are applied in the order listed below. <dt-expandable-text label="More..." labelClose="Less"> This means that you can construct complex operations for fine-grain control over the processes that are monitored in your environment. For example, you might define an inclusion rule that’s followed by an exclusion rule covering the same process. </dt-expandable-text> export class ExpandableTextDefaultExample {} With automatic monitoring enabled, you can create rules that define exceptions to automatic process detection and monitoring. With automatic monitoring disabled, you can define rules that identify specific processes that should be monitored. Rules are applied in the order listed below. <dt-expandable-text label="More..." labelClose="Less"> This means that you can construct complex operations for fine-grain control over the processes that are monitored in your environment. For example, you might define an inclusion rule that’s followed by an exclusion rule covering the same process. </dt-expandable-text> export class ExpandableTextDefaultExample {}

Imports

You have to import the DtExpandableTextModule when you want to use the <dt-expandable-text>:

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

Initialization

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

Attribute Description
dt-expandable-text The expandable text but without styling

Inputs

Name Type Default Description
expanded boolean false Sets the text's expanded state.
label string Sets the label of the expand-button
labelClose string Sets the label of the collapse-button

Outputs

Name Type Description
expandChanged Eventemitter<boolean> Emits and event when the expandedstate changes.
expanded Eventemitter<void> Event emitted when text is expanded.
collapsed Eventemitter<void> Event emitted when text is collapsed.

Methods

Name Return Value Description
toggle void Toggles the expanded state, i.e. changes it to expanded if collapsed, or vice-versa.
open void Expands the text.
close void Closes the text.