The dtIndicator directive adds the capability to add styling to indicate a warning or an error.

This directive was introduced to add indicators in the <dt-table>, but can be used in other components as well to handle error, warning, recovered or critical indications.

Indicator: <span [dtIndicator]="shown" [dtIndicatorColor]="color">Color</span>
<br /><br />
  (click)="color = { 'recovered': 'warning', 'warning': 'error', 'error': 'critical', 'critical': 'recovered'}[color]"
  Toggle color
<button dt-button (click)="shown = !shown">Toggle indicator</button>

For a more complex example with the indicator in use visit: Tree Table with DtIndicator


You have to import the DtIndicatorModule when you want to use the dtIndicator directive:

  imports: [DtIndicatorModule],
class MyModule {}


To apply the dynatrace indicator, add the dtIndicator directive to any component or HTML element.


Name Type Default Description
dtIndicator boolean true Whether the indicator is active.
dtIndicatorColor 'error' | 'warning' | 'recovered' | 'critical' error Sets the color.