How to contribute
Find all the information about contributing to the Angular components library summarized on this page.
All useful commands to develop Angular components features are collected on this page.
To ensure good code quality we provide some coding standards that should be kept in mind when developing Angular components.
We provide a set of custom TSLint rules to help you using the Angular components correctly as intended.
The changelog lists all bug fixes and features of all Angular components versions since version 1.0.0.
Dynatrace UI Components
The alert component informs users about necessary configuration actions or failures.
Bar-indicators are used to compare values with each other.
Breadcrumbs are a navigational aid that help the user understand on what page they are and what path led them there.
The button component is used for navigating and triggering actions.
The button group component is used to switch between different views.
The chart component visualizes series of data to easily analyze and compare metrics.
The checkbox component is used to toggle one or multiple options from a set.
The confirmation dialog appears to confirm setting changes via save or cancel button.
The consumption component visualizes service usage data combining an icon, a title, a progress bar and some description text.
The context dialog is an overlay which appears on click of a button.
Copy to clipboard
The copy to clipboard component is used to let the user copy links, code snippets and more.
The CTA card is a specific type of card, showing a call to action content.
The drawer is a component that adds collapsible side content to some primary content.
The empty state is used if a component or entity view has no data to show.
The expandable panel component is responsible for showing and hiding context information.
The expandable section is used to show and hide context information.
The expandable text component provides expand and collapse functionality for inline-text.
The filter is used to narrow down displayed content.
The form field component can be used to wrap input components to provide a label, errors or hints.
Formatters are pipes and util functions that can be used to format values within templates and TypeScript files.
The highlight component is used to highlight characters in a string.
The dtIndicator directive can be used with any component to indicate a warning or an error.
An info group visualizes properties by combining an icon and a short text.
The inline editor is used to make text editable.
An input field allows to enter various types of data.
The key-value list component is used to visualize properties.
The loading distractor indicates a saving or loading action.
A menu provides a list of links which can be grouped according to categories.
The micro chart component is a smaller version of a chart where the amount of displayed information is reduced.
Overlays are floating labels that are meant to clarify, display additional context information, or help you to use specific content.
A pagination is used to split long lists or tables in smaller sets.
The progress bar component is used to visualize progress.
The progress circle component is used to visualize progress.
The radio button component is used to select one option from a set.
The secondary nav component is a navigation menu that can contain internal and external links.
The select component allows to select a value from a set of options.
The selection area creates a selected area inside an origin element.
The show more component creates a show more pagination widget.
The stepper component is to guide through multiple steps. The steps are indicated by the progress indicator on the top. There should be at least 3 steps.
The switch component is used to toggle an option.
A table is a two-dimensional structure composed of rows and columns displaying a set of comparable data.
Tabs are used to switch between different views.
A tile is a clickable area and represents e.g. entities.
The timeline chart enables a quick duration analysis of a user action.
Toasts display status messages or feedback that is directly related to an action.
Toggle button group
Top Bar Navigation
A navigation bar for first level navigation commonly placed on the top area of a page.
The tree-table is used to show a tree of entities with additional data in a grid/table, hence with table headers.