ngx-multi-select-input

🚀 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!

Demo & Repository

📊 Live Demo: https://noredinebahri.github.io/ngx-multi-select-input-demo

📦 GitHub Repository: https://github.com/noredinebahri/ngx-multi-select-input

Features

• 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

Installation

npm install ngx-multi-select-input

Usage

1. Import the component in your standalone app or module:

import { NgxMultiSelectInputComponent } from 'ngx-multi-select-input';

2. 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 = '';
}

3. 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>

API

Inputs

| 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 |

Outputs

| Name | Type | Description | |------------------|---------|---------------------------------------------| | searchTermChange | string | Emits the new value when chips change |

Styling

• You can override the default SCSS for .term-chip, .terms-wrapper, .dropdown-list, etc.
• Pass your own chipColors array for custom chip backgrounds.

Example

<ngx-multi-select-input
  [searchTerm]="tags"
  [suggestions]="['Angular', 'React', 'Vue', 'Svelte']"
  [chipColors]="['#e57373', '#81c784', '#64b5f6', '#ffd54f']"
  (searchTermChange)="tags = $event"
></ngx-multi-select-input>

License

MIT