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 />
<button
  dt-button
  (click)="color = { 'recovered': 'warning', 'warning': 'error', 'error': 'critical', 'critical': 'recovered'}[color]"
>
  Toggle color
</button>
<button dt-button (click)="shown = !shown">Toggle indicator</button>

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

Imports

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

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

Initialization

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

Inputs

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