Limit tags

Caps how many chips a multi-select renders. limitTags shows only the first N chips while the field is unfocused and collapses the rest into a summary, and getLimitTagsText customises that “+N” text. Focusing the field reveals every chip again.

Overview

Examples

Usage

Import AutocompleteComponent and configure it with the inputs below. The full runnable source is on the Examples tab.

html

<autocomplete
  [options]="films"
  [multiple]="true"
  [(value)]="value"
  [limitTags]="2"
  [getLimitTagsText]="getLimitTagsText"
  appearance="outline"
  label="Favorite films" />

API

This example demonstrates the inputs below. See the Autocomplete introduction for the complete API — every input, output, content template and filter helper.

Inputs

Name	Type	Default	Description
`multiple`	`boolean`	`false`	Allow selecting several values, rendered as chips.
`limitTags`	`number`	`-1`	Max chips shown when unfocused (-1 = all).
`getLimitTagsText`	`(more: number) => string`	(more) => `+${more}`	Label for the truncated-tags summary.
`isOptionEqualToValue`	`(a: T, b: T) => boolean`	`===`	Equality used to match a value against an option.