Overview

Tag inputs collect a list of short values, such as keywords, email addresses, or labels, as removable tags. Web Awesome added tag inputs in 3.13.0. The standalone `WaTagInputDirective` uses a `string[]` model and implements `ControlValueAccessor` and `Validator`, so it works with `[(ngModel)]`, reactive forms, `required`, `minTags`, and `maxTags`. The array is assigned to the element's live `value` property rather than serialized into an HTML attribute.

Import

Import the tagInput directive from the angular-awesome package:

// Import the tagInput directive
import { WaTagInputDirective } from 'angular-awesome/tag-input';

Examples

WaTagInputDirective Usage Examples

Basic Usage

<wa-tag-input label="Topics" placeholder="Add a topic"></wa-tag-input>

Two-Way Binding

<wa-tag-input
  [(ngModel)]="topics"
  label="Topics"
  hint="Press Enter or comma to add a topic"
  withClear
></wa-tag-input>

<p>Selected: {{ topics.join(', ') }}</p>

topics = ['angular', 'web-components'];

Reactive Forms and Limits

<form [formGroup]="articleForm">
  <wa-tag-input
    formControlName="tags"
    label="Article tags"
    [required]="true"
    [minTags]="2"
    [maxTags]="5"
  ></wa-tag-input>

  @if (articleForm.controls.tags.hasError('minTags')) {
    <p>Add at least two tags.</p>
  }
</form>

articleForm = new FormGroup({
  tags: new FormControl<string[]>([], { nonNullable: true })
});

Multiple Delimiters

Each character in delimiter acts as a separator. This accepts commas and semicolons.

<wa-tag-input delimiter=",;" [(ngModel)]="recipients"></wa-tag-input>

Use an empty delimiter when only Enter should create tags.

<wa-tag-input [delimiter]="''" [(ngModel)]="labels"></wa-tag-input>

Validate Before Creating a Tag

<wa-tag-input
  [(ngModel)]="emails"
  inputmode="email"
  (waCreate)="validateEmail($event)"
></wa-tag-input>

validateEmail(event: CustomEvent<{ inputValue: string }>) {
  if (!event.detail.inputValue.includes('@')) {
    event.preventDefault();
  }
}

Slots and Appearance

<wa-tag-input appearance="filled" size="l" pill withClear>
  <strong slot="label">Skills</strong>
  <wa-icon slot="start" name="tags"></wa-icon>
  <span slot="hint">Add up to eight skills.</span>
  <wa-icon slot="clear-icon" name="xmark"></wa-icon>
</wa-tag-input>

For server-rendered markup, add [withLabel]="true" and [withHint]="true" when using the corresponding slots.

Default Form Value

defaultValue is the delimiter-separated value used when a native form resets. The live Angular value remains a string array.

<wa-tag-input
  defaultValue="angular,typescript"
  [(ngModel)]="tags"
  name="tags"
></wa-tag-input>

API Reference

Inputs

Outputs

Methods

Validation

The Angular validator reports:

• required when required is true and the array is empty.
• minTags when a non-empty array contains fewer than minTags entries. Like the Web Awesome control, minTags alone does not invalidate an empty optional value.
• maxTags when the model contains more than maxTags entries.

Styling

The component exposes these CSS parts:

CSS custom states are blank when no tags exist and readonly while the control is read-only.