Search modal (command palette style) for Angular using CDK Overlay.
npm install ng-searchixA beautiful, customizable search component for Angular with keyboard navigation, icon support, and external link integration.
- 🎨 Beautiful default UI with modern, clean design
- 🎨 Fully customizable with 60+ CSS custom properties
- 🔧 Custom button template support
- 🎯 Icon library integration (Lucide, Heroicons, Font Awesome, or custom)
- 🔗 External link support with dedicated icon
- ⌨️ Keyboard navigation (↑/↓ arrows, Enter, Esc)
- ⏱️ Recent items with automatic localStorage sync ⭐ NEW
- 🚀 Lightweight with minimal dependencies
- ♿ Accessible with ARIA attributes
- 📱 Responsive design
``bash`
npm install ng-searchix
`typescript
import { NgModule } from '@angular/core';
import { SearchixModule } from 'ng-searchix';
@NgModule({
imports: [SearchixModule]
})
export class AppModule {}
`
Add to your angular.json:
`json`
"styles": [
"node_modules/ng-searchix/styles/searchix.css",
"src/styles.css"
]
`typescript
import { Component } from '@angular/core';
import { SearchItem } from 'ng-searchix';
@Component({
selector: 'app-root',
template:
[placeholder]="'Search...'"
[hotkey]="'ctrl+k'"
(itemSelected)="onItemSelected($event)"
>
})
export class AppComponent {
searchItems: SearchItem[] = [
{
id: '1',
title: 'Getting Started',
subtitle: 'Learn the basics',
icon: 'book',
href: 'https://example.com/docs'
},
{
id: '2',
title: 'API Reference',
subtitle: 'Complete documentation',
icon: 'code',
href: 'https://example.com/api'
}
];
onItemSelected(item: SearchItem) {
console.log('Selected:', item);
}
}
`
- 📖 Usage Guide - Complete usage documentation
- 🎨 Theme Examples - Ready-to-use themes
- 💡 Examples - Practical code examples
`bash`
npm install
npm run build
The built library output will be in dist/ng-searchix.
`bash`
npm test
`html
[buttonTemplate]="customButton"
>
`
`html
[iconRenderer]="iconRenderer"
>
`
`css`
:root {
--searchix-bg: #ffffff;
--searchix-fg: #111827;
--searchix-radius: 12px;
--searchix-width: 640px;
/ ... 60+ more variables /
}
Items with href automatically show an external link icon:
`typescript`
{
id: '1',
title: 'Documentation',
href: 'https://example.com', // External link icon appears
icon: 'book'
}
Automatically tracks and displays recently selected items:
`typescript
// Option 1: Auto localStorage (no setup needed!)
// Option 2: Provide initial recents
[recentItems]="recentItems"
>
`
Features:
- Shows recent items when search is empty
- Click × to remove items from recents
- Auto-saves to localStorage (key: searchix-recents)
- Maximum 10 recent items
- No manual management needed!
- Chrome/Edge (latest)
- Firefox (latest)
- Safari (latest)
- Uses Angular CDK Overlay for modal rendering
- Event-driven API - emits itemSelected instead of routing internally>=12 <19`
- Peer dependency: Angular
- Compatible with Angular 12-18
MIT
Contributions are welcome! Please feel free to submit a Pull Request.