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.

<dt-tag-list aria-label="A list of tags applying to the current host">
  <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>

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.

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

<dt-tag-list aria-label="A list of tags showing custom groupings.">
  <dt-tag *ngFor="let tag of tags" removable (removed)="removeTag(tag)"
    >{{tag}}
  </dt-tag>
</dt-tag-list>
<p>
  <button dt-button (click)="addTags()">Add another tag</button>
</p>

With key/category

<dt-tag-list aria-label="A list of tags showing custom groupings.">
  <dt-tag><dt-tag-key>[My key]:</dt-tag-key>My value</dt-tag>
</dt-tag-list>

Interactive example

<dt-tag-list aria-label="A list of tags applying to the current host">
  <dt-tag
    *ngFor="let tag of tags"
    [removable]="canRemove"
    [value]="tag.value"
    (removed)="doRemove(tag)"
    [title]="tag.title"
  >
    <dt-tag-key *ngIf="showKey">{{tag.key}}</dt-tag-key>
    {{tag.displayValue}}
  </dt-tag>
</dt-tag-list>
<p>
  <button
    dt-button
    (click)="canRemove = !canRemove"
    [variant]="canRemove ? 'primary' : 'secondary'"
  >
    Toggle removable
  </button>
  <button
    dt-button
    (click)="showKey = !showKey"
    [variant]="showKey ? 'primary' : 'secondary'"
  >
    Toggle key
  </button>
  <button dt-button (click)="undoRemove()" [disabled]="removed.length === 0">
    Undo remove
  </button>
</p>

Tag add button

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

<dt-tag-list aria-label="A list of tags showing custom groupings.">
  <dt-tag *ngFor="let tag of tags">{{ tag }}</dt-tag>
  <dt-tag-add
    placeholder="insert tag name here"
    aria-label="tag input"
    (tagAdded)="addTag($event)"
  ></dt-tag-add>
</dt-tag-list>