https://github.com/luismtapiab/ngx-multi-field-dropdown
A customizable, lightweight Angular searchable dropdown component that allows searching across multiple object fields with word-based filtering.
https://github.com/luismtapiab/ngx-multi-field-dropdown
Last synced: about 2 months ago
JSON representation
A customizable, lightweight Angular searchable dropdown component that allows searching across multiple object fields with word-based filtering.
- Host: GitHub
- URL: https://github.com/luismtapiab/ngx-multi-field-dropdown
- Owner: luismtapiab
- Created: 2026-05-16T05:45:37.000Z (3 months ago)
- Default Branch: master
- Last Pushed: 2026-06-06T03:45:56.000Z (about 2 months ago)
- Last Synced: 2026-06-06T04:21:42.921Z (about 2 months ago)
- Language: TypeScript
- Homepage: https://luismtapiab.github.io/ngx-multi-field-dropdown/
- Size: 151 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- fucking-awesome-angular - ngx-multi-field-dropdown - A customizable Angular searchable dropdown component with multi-field search support. (Third Party Components / Form Controls)
- awesome-angular - ngx-multi-field-dropdown - A customizable Angular searchable dropdown component with multi-field search support. (Third Party Components / Form Controls)
README
# ngx-multi-field-dropdown 🌟
[](https://www.npmjs.com/package/ngx-multi-field-dropdown)
[](https://opensource.org/licenses/MIT)
[](https://stackblitz.com/github/luismtapiab/ngx-multi-field-dropdown/tree/master/example)
A customizable, lightweight, and high-performance Angular searchable dropdown component with multi-field search support. Driven by **Angular Signals** for optimal performance and reactivity.
Demo:
- Live demo on Render: https://ngx-multi-field-dropdown.onrender.com/ (preview built with Docker, made during this excelent course: http://devopswithdocker.com)
- Github Pages: https://luismtapiab.github.io/ngx-multi-field-dropdown
- or in StackBlitz:
👉 **[Open in StackBlitz Live Editor](https://stackblitz.com/github/luismtapiab/ngx-multi-field-dropdown/tree/master/example)**
---
## ⚡ Features
- 🔍 **Multi-Field Search**: Query items by multiple keys/properties simultaneously.
- 🚦 **Reactive Core**: Built using Angular Signals for modern, high-performance reactivity.
- 🎨 **Fully Customizable Styles**: Styled with custom CSS variables that are easy to override.
- ⌨️ **Keyboard Navigation**: Designed with accessibility in mind.
- 📦 **No Workspaces Required**: Completely standalone structures for simple local development and robust packaging.
## 📂 Repository Structure
This repository contains both the library source code and a clean, fully-functioning example application:
- **[`ngx-multi-field-dropdown/`](./ngx-multi-field-dropdown)**: The library source folder.
- **[`example/`](./example)**: A standalone Angular application demonstrating how to import and use the library.
---
## 📦 Installation
To install the library, run the following command in your Angular application directory:
```bash
npm install ngx-multi-field-dropdown
```
---
## 🛠️ Quick Usage
1. **Import the component** in your Angular component:
```typescript
import { Component } from '@angular/core';
import { MultiFieldDropdownComponent } from 'ngx-multi-field-dropdown';
@Component({
selector: 'app-root',
standalone: true,
imports: [MultiFieldDropdownComponent],
templateUrl: './app.component.html'
})
export class AppComponent {
// Your data list
items = [
{ id: 1, name: 'John Doe', role: 'Developer', dept: 'Engineering' },
{ id: 2, name: 'Jane Smith', role: 'Designer', dept: 'Creative' }
];
// Configure search fields
searchFields = ['name', 'role', 'dept'];
}
```
2. **Add it to your HTML**:
```html
```
---
## 📄 License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.