Tag

The tag component is used to classify or categorize information.

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.

The dt-tag wraps text or key-value pairs, which then is wrapped by dt-tag-list.

´ Loading interactive demo...
<dt-tag-list aria-label="test"> <dt-tag>window</dt-tag> <dt-tag>deploy</dt-tag> <dt-tag>.NetTest</dt-tag> <dt-tag>193.168.4.3:80</dt-tag> <dt-tag><dt-tag-key>Maxk</dt-tag-key>loadtest</dt-tag> <dt-tag>sdk-showroom</dt-tag> <dt-tag>dt</dt-tag> <dt-tag>requests</dt-tag> <dt-tag>cluster</dt-tag> <dt-tag>server</dt-tag> <dt-tag>node</dt-tag> </dt-tag-list> export class TagDefaultExample {} <dt-tag-list aria-label="test"> <dt-tag>window</dt-tag> <dt-tag>deploy</dt-tag> <dt-tag>.NetTest</dt-tag> <dt-tag>193.168.4.3:80</dt-tag> <dt-tag><dt-tag-key>Maxk</dt-tag-key>loadtest</dt-tag> <dt-tag>sdk-showroom</dt-tag> <dt-tag>dt</dt-tag> <dt-tag>requests</dt-tag> <dt-tag>cluster</dt-tag> <dt-tag>server</dt-tag> <dt-tag>node</dt-tag> </dt-tag-list> export class TagDefaultExample {}

Imports

You have to import the DtTagModule to use the dt-tag-list and the dt-tag:

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

Initialization

To display tags in your view, use the <dt-tag-list> wrapper element put <dt-tag> elements inside the wrapper.

In addition <dt-tag> allows other selectors to 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.

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.

Tag list

The dt-tag-list element evaluates whether an amount of dt-tag elements fit in one line and displays a 'more' button when it doesn't fit. If provided dt-tag-add will always be displayed at the end of the dt-tag-list.

Inputs

Name Type Default Description
aria-label string undefinded Used to set the 'aria-label' attribute on the underlying input element.

Examples

Removable state

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

With key/category

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

Interactive example

´ Loading interactive demo...
<dt-tag-list> <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> </dt-tag-list> <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}`); } } <dt-tag-list> <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> </dt-tag-list> <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}`); } }

Tag add button

The dt-tag-add button allows manual tag entries to an entity.

The tag add button should be placed inside the dt-tag-list wrapper and after your dt-tag elements.

Inputs

Name Type Default Description
placeholder string undefined Placeholder string for the add tag input overlay.
aria-label string undefinded Used to set the 'aria-label' attribute on the underlying input element.

Outputs

Name Type Description
tagAdded EventEmitter<event> Emits event when a tag is added.

Methods

Name Type Description
open() void Opens the input overlay.
close() void Closes the input overlay.