Tag

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}`); } }