🚀 This project is open for contributions!
I hope the community will help improve, maintain, and grow this library.
If you have ideas, bug fixes, or enhancements, please open an issue or submit a pull request.
Let's make this the best Angular multi-select input together! ❤️
A modern, customizable Angular standalone component for multi-term input with chips, autocomplete dropdown, and beautiful color support. Perfect for tag editors, search bars, and more!
https://github.com/noredinebahri/ngx-multi-select-input
- Standalone Angular component (Angular 15+)
- Add multiple terms as colored chips
- Autocomplete dropdown with suggestions
- Customizable chip colors
- Remove chips with a click
- Keyboard and mouse friendly
- Fully styleable via SCSS
npm install ngx-multi-select-input- Import the component in your standalone app or module:
import { NgxMultiSelectInputComponent } from 'ngx-multi-select-input';- Add it to your imports (for standalone):
@Component({
selector: 'app-root',
standalone: true,
imports: [NgxMultiSelectInputComponent],
templateUrl: './app.component.html',
styleUrl: './app.component.scss'
})
export class AppComponent {
searchTerm = '';
}- Use in your template:
<ngx-multi-select-input
[searchTerm]="searchTerm"
[suggestions]="['Angular', 'React', 'Vue']"
[chipColors]="['#ff6f61', '#6fcf97', '#56ccf2']"
[placeholder]="'Type to search...'"
(searchTermChange)="searchTerm = $event"
></ngx-multi-select-input>| Name | Type | Default | Description |
|---|---|---|---|
| searchTerm | string | '' | The current value (space-separated terms) |
| suggestions | string[] | [] | Autocomplete dropdown suggestions |
| chipColors | string[] | see below | Array of colors for chips (cycled by index) |
| placeholder | string | 'Search ...' | Input placeholder text |
| Name | Type | Description |
|---|---|---|
| searchTermChange | string | Emits the new value when chips change |
- You can override the default SCSS for .term-chip, .terms-wrapper, .dropdown-list, etc.
- Pass your own chipColors array for custom chip backgrounds.
<ngx-multi-select-input
[searchTerm]="tags"
[suggestions]="['Angular', 'React', 'Vue', 'Svelte']"
[chipColors]="['#e57373', '#81c784', '#64b5f6', '#ffd54f']"
(searchTermChange)="tags = $event"
></ngx-multi-select-input>MIT