Tag Group for Angular

import { AuiTagGroup } from '@absoluteui/angular/tag-group';

Styles are included with the component. Behavior, keyboard and screen-reader support, design tokens, and limitations are described on the Tag Group page; this page covers the Angular API.

Defaults for every instance: provideAbsoluteUIConfig({ components: { tagGroup: { ... } } }) (see Configuration).

Example

import { Component } from '@angular/core';
import type { TagGroupItem, TagGroupRemoveDetail } from '@absoluteui/components/tag-group';
import { AuiTagGroup } from '@absoluteui/angular/tag-group';

@Component({
  selector: 'app-filters',
  imports: [AuiTagGroup],
  template: `<aui-tag-group label="Applied filters" [items]="filters" [removable]="true" (removed)="remove($event)"></aui-tag-group>`,
})
export class FiltersComponent {
  filters: TagGroupItem[] = [{ value: 'london', label: 'London' }, { value: 'remote', label: 'Remote' }];

  remove({ value }: TagGroupRemoveDetail): void {
    this.filters = this.filters.filter((f) => f.value !== value);
  }
}

<aui-tag-group>

Class AuiTagGroup; template reference #ref="auiTagGroup".

Server rendering: Renders on the server; the browser re-creates it after hydration.

Angular forms: implements ControlValueAccessor; the form value is string[]. Bind [formControl], formControlName, or [(ngModel)]; validation messages of the component report through the aui error key. See Forms.

Inputs

Input	Type	Default	Description
label	string		Required. Accessible name of the group.
items	readonly TagGroupItem[]		Required. Tags: { value, label, disabled? } (unique values, at most 1,000).
removable	boolean	false	Remove button per tag; Delete and Backspace remove the focused tag.
selection	TagGroupSelection	'none'	Selection mode.
size	TagGroupSize	'md'	Tag size.
icons	Partial<TagGroupIcons>		Icon slot overrides.
locale	string	'en-US'	Locale of the remove label and announcement.

Two-way bindings

Model	Type	Change output	Description
[(value)]	string[]	(valueChange)	The value: [(value)] without forms; with Angular forms, bind the form control instead.

Outputs

Output	Payload	Description
(changed)	TagGroupChangeDetail	The user changed the selection (or removed a selected tag): { value }. Re-emits aui-change.
(removed)	TagGroupRemoveDetail	The user removes a tag: { value, item }. Prevent it to keep the tag. Re-emits aui-remove.

Methods

Call them through a viewChild query or a template reference.

Method	Description
focus(): void	Focus the tag in the tab sequence.