Migrating ng-tags-input to modern Angular
ng-tags-input turned a text input into a list of removable tags, with optional autocomplete. It is tied to AngularJS.
What replaces it
| Option | When to choose it |
|---|---|
| Angular Material chips | mat-chip-grid with an input: tags as chips, with keyboard support and optional autocomplete. |
| ng-select | When tags come from a list or a remote search; supports multiple selection and adding new tags. |
| Your own tags component | When the design is custom: an input, a list of tags and a ControlValueAccessor. |
How to migrate it
- Note the rules of each tag input: allowed characters, minimum and maximum length, duplicates, maximum number of tags and the autocomplete source.
- Build one shared tags component that implements ControlValueAccessor and takes those rules as inputs.
- Turn the autocomplete source into an observable with debounce, and swap usages screen by screen.
Watch out. ng-tags-input stores tags as objects with a text property by default. Most replacements work with plain strings, so convert the model in one place and keep the API payload unchanged.
Other libraries
Planning a migration or a micro-frontend platform?
In a 20-minute call you describe your situation and I tell you how I'd approach it. If it isn't worth doing yet, I'll say so.
Message me on LinkedIn