Tag

A tag allows users to mark entities with custom labels and keywords. This information can then be used for organizational, filter and search purposes. Tags are either added manually or autogenerated and applied to an entity by the system, in which case the tag cannot be edited or deleted.

´ Loading interactive demo...
<dt-tag>Hello tag</dt-tag> export class TagDefaultExample {} <dt-tag>Hello tag</dt-tag> export class TagDefaultExample {}

States

Tags have a default state as well as a focused state.

Variants

Tags can consist of a key:value pair or a simple value, depending on which of the following tag variants is chosen.

Removable tag

Removable tags are used when a tag is manually added by a user and consist of a value only. They offer the possibility to remove a tag that was wrongly applied to an entity.

´ Loading interactive demo...
<dt-tag removable>This can be removed</dt-tag> export class TagRemovableExample {} <dt-tag removable>This can be removed</dt-tag> export class TagRemovableExample {}

Autogenerated tag

Autogenerated tags are created by the system and automatically added to an entity. They cannot be edited or deleted and consist of either a key:value pair or a value only.

´ Loading interactive demo...
<dt-tag><dt-tag-key>[My key]:</dt-tag-key>My value</dt-tag> export class TagKeyExample {} <dt-tag><dt-tag-key>[My key]:</dt-tag-key>My value</dt-tag> export class TagKeyExample {}

Behavior

Add tag button

The add tag button is used to manually create and add tags to an entity. If there are no tags added to an entity yet, the add tag button can appear on its own. Otherwise, it is always placed last either after a single tag or a group of tags.

Add tag button

Distances

x: 8px
y: 4px
z: 12px

Button

height: 24px
width: 86px
border: 1px solid $turquoise-600 //inside
border-radius: 12px

Icon

Plus icon
width: 16px
height: 16px
icon-color: $turquoise-600

Font

font-family: Bernina Sans Regular
font-size: 12px
color: $turquoise-600

When the add tag button is clicked, it is replaced by a context dialog. The context dialog itself then holds an input field to specifiy the name of the tag and an add button to confirm the entry.

Adding a tag overlay

Overlay

width: 320px
height: 78px
border: 1px solid $gray-700 //inside
border-radius: 3px
background-color: $gray-700
padding: 8px

Icon

Plus icon
width: 16px
height: 16px
icon-color: #fff
margin-right: 4px

Add tag font

font-family: Bernina Sans Regular
font-size: 12px
color: #fff

Input field

Input field
margin-top: 16px
margin-right: 8px

Add button

Primary button on dark background

The dt-tag wraps text or key-value pairs.

Imports

You have to import the DtTagModule when you want to use the dt-tag:

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

Initialization

To use the Dynatrace tag, use the <dt-tag> element.

In addition, also other selectors can be used.

  • <dt-tag> or [dt-tag] or [dtTag] - To create the tag itself. Attribute selectors can be used on an anchor tag for example.
  • <dt-tag-key> or [dt-tag-key] or [dtTagKey] - To identify a content child as a key/attribute for the tag.
´ Loading interactive demo...
<dt-tag>Hello tag</dt-tag> export class TagDefaultExample {} <dt-tag>Hello tag</dt-tag> export class TagDefaultExample {}

Inputs

Name Type Default Description
value T undefined This can be used to bind a specific value to a tag.
removable boolean false If this is set to true, the tag can be removed by the user by clicking the abort icon.
disabled boolean false DEPRECATED - will be removed with 5.0.0 without replacement

Outputs

Name Type Default Description
removed event<T> This event is fired, when the user triggers the abort icon.

Examples

Removable state

´ Loading interactive demo...
<dt-tag removable>This can be removed</dt-tag> export class TagRemovableExample {} <dt-tag removable>This can be removed</dt-tag> export class TagRemovableExample {}

With key/category

´ Loading interactive demo...
<dt-tag><dt-tag-key>[My key]:</dt-tag-key>My value</dt-tag> export class TagKeyExample {} <dt-tag><dt-tag-key>[My key]:</dt-tag-key>My value</dt-tag> export class TagKeyExample {}

Interactive example

´ Loading interactive demo...
<div> <dt-tag [removable]="canRemove" [value]="value1" (removed)="doRemove(tag1)" #tag1 title="My custom tooltip" > <dt-tag-key *ngIf="hasKey">[AWS]OSType:</dt-tag-key> Windows </dt-tag> <dt-tag [removable]="canRemove" [value]="value2" (removed)="doRemove(tag2)" #tag2 title="Another tooltip" > <dt-tag-key *ngIf="hasKey">[AWS]Category:</dt-tag-key> Managed </dt-tag> </div> <button dt-button (click)="canRemove = !canRemove" [variant]="canRemove ? 'primary' : 'secondary'" > Toggle removable </button> <button dt-button (click)="hasKey = !hasKey" [variant]="hasKey ? 'primary' : 'secondary'" > Toggle key </button> export class TagInteractiveExample { value1 = 'My value 1'; value2 = 'My value 2'; canRemove = false; hasKey = false; doRemove(tag: DtTag<string>): void { window.alert(`Tag removed: ${tag.value}`); } } <div> <dt-tag [removable]="canRemove" [value]="value1" (removed)="doRemove(tag1)" #tag1 title="My custom tooltip" > <dt-tag-key *ngIf="hasKey">[AWS]OSType:</dt-tag-key> Windows </dt-tag> <dt-tag [removable]="canRemove" [value]="value2" (removed)="doRemove(tag2)" #tag2 title="Another tooltip" > <dt-tag-key *ngIf="hasKey">[AWS]Category:</dt-tag-key> Managed </dt-tag> </div> <button dt-button (click)="canRemove = !canRemove" [variant]="canRemove ? 'primary' : 'secondary'" > Toggle removable </button> <button dt-button (click)="hasKey = !hasKey" [variant]="hasKey ? 'primary' : 'secondary'" > Toggle key </button> export class TagInteractiveExample { value1 = 'My value 1'; value2 = 'My value 2'; canRemove = false; hasKey = false; doRemove(tag: DtTag<string>): void { window.alert(`Tag removed: ${tag.value}`); } }