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.

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.

<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"
    (submitted)="addTag($event)"
  ></dt-tag-add>
</dt-tag-list>

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.
title string Add Tag Title of the 'Add' button and overlay.

Outputs

Name Type Description
submitted EventEmitter<event> Emits event when the form is submitted. With the default form the event contains a tag key that holds the value of the input

Methods

Name Type Description
open() void Opens the input overlay.
close() void Closes the input overlay.
submit() void Triggers submitted if the form is valid.

Custom tag add form

A custom form can be passed to the dt-tag-add component. You need to include a FormGroupDirective (from @angular/forms) inside the ng-content and the form's value will be used when the form is submitted in the output.

<dt-tag-list aria-label="A list of tags.">
  <dt-tag *ngFor="let tag of tags">
    <dt-tag-key *ngIf="tag.key">[{{tag.key}}]:</dt-tag-key>
    {{ tag.value }}
  </dt-tag>
  <dt-tag-add
    placeholder="insert tag name here"
    aria-label="tag input"
    #tagAdd
    (submitted)="addTag($event)"
  >
    <form [formGroup]="keyValueForm" class="ba-key-value-form">
      <dt-form-field class="ba-key-form-field">
        <dt-label>Key (Required)</dt-label>
        <input
          #key
          type="text"
          dtInput
          aria-label="Tag key"
          required
          formControlName="key"
          (keyup.enter)="tagAdd.submit()"
        />
      </dt-form-field>
      <dt-form-field>
        <dt-label>Value</dt-label>
        <input
          #value
          type="text"
          dtInput
          aria-label="Tag value"
          formControlName="value"
          (keyup.enter)="tagAdd.submit()"
        />
      </dt-form-field>
    </form>
  </dt-tag-add>
</dt-tag-list>

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>