Tag

A tag allows users to mark entities with custom labels and keywords to be able to better organize and filter them. Custom tags can be created manually, whereas autogenerated tags are created by a system and can not be edited.

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

States

Removable tag

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

Disabled tag

´ Loading interactive demo...
<dt-tag disabled>Disabled tag</dt-tag> export class DisabledTagExampleComponent { } Disabled tag export class DisabledTagExampleComponent { }

Autogenerated tag

Autogenerated tags cannot be removed.

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

Add tags

Add tag button

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

On trigger of the add tag button, a context panel replaces the button (the font stays in the same position). The panel holds an input field and an add button.

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

Tag

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

Example:

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

Options & Properties

Name Type Default Description
<ng-content> The text (error/warning) message which should be displayed.
[disabled] boolean false Let's the tag appear disabled.
[removable] boolean false If this is set to true, the tag can be removed by the user by clicking the abort icon.
[value] T undefined This can be used to bind a specific value to a tag.
(removed) event<T> The event which is fire, when the user hits the abort icon.

Examples

Disabled state

´ Loading interactive demo...
<dt-tag disabled>Disabled tag</dt-tag> export class DisabledTagExampleComponent { } Disabled tag export class DisabledTagExampleComponent { }

Removable state

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

With key/category

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

Interactive example

´ Loading interactive demo...
<div> <dt-tag [removable]="canRemove" [disabled]="disabled" [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" [disabled]="disabled" [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)="disabled=!disabled" [variant]="disabled ? 'primary' : 'secondary'">Toggle disabled</button> <button dt-button (click)="hasKey=!hasKey" [variant]="hasKey ? 'primary' : 'secondary'">Toggle key</button> export class InteractiveTagExampleComponent { value1 = 'My value 1'; value2 = 'My value 2'; disabled = false; canRemove = false; hasKey = false; doRemove(tag: DtTag<string>): void { window.alert(`Tag removed: ${tag.value}`); } }
[AWS]OSType: Windows [AWS]Category: Managed
export class InteractiveTagExampleComponent { value1 = 'My value 1'; value2 = 'My value 2'; disabled = false; canRemove = false; hasKey = false; doRemove(tag: DtTag): void { window.alert(`Tag removed: ${tag.value}`); } }