A powerful Angular library that provides Bootstrap-styled select components with advanced features like multiple selection, smart option handling, and automatic styling management.
npm install @pmeig/ngb-selectA powerful Angular library that provides Bootstrap-styled select components with advanced features like multiple selection, smart option handling, and automatic styling management.
bash
npm install @pmeig/ngb-select
`
Features
- 🎯 BSelectDirective - Smart single-selection select directive with Bootstrap styling
- 📦 BSelectMultipleDirective - Multiple selection support with array value handling
- 🔘 BOptionDirective - Enhanced option directive with value binding support
- 🔄 Smart Value Mapping - Automatic conversion between option values and selected items
- ✨ Size Variants - Support for small and large select components
- 🛡️ Disabled State Management - Built-in disabled state handling with event prevention
- 🎨 Bootstrap 5.3.3 compatible styling
- 🚀 Angular 20.2.1 support with signals
- 📱 Responsive design
- ♿ Accessibility friendly
- 🛠️ Smart parent element management
Usage
$3
typescript
import { SelectMaterial } from '@pmeig/ngb-select';@NgModule({
imports: [
SelectMaterial
],
// ...
})
export class AppModule { }
`
$3
html
`
$3
html
`
$3
html
`
$3
html
`API Reference
$3
Applied automatically to
elements.| Property | Type | Default | Description |
|----------|------|---------|-------------|
|
id | string | Required | Unique identifier for the select element |
| selection | T | undefined | Currently selected value |
| tall | 'sm' \| 'lg' | undefined | Size variant of the select |
| disabled | boolean | false | Disabled state of the select |#### Events
| Event | Type | Description |
|-------|------|-------------|
|
selectionChange | T \| undefined | Emitted when selection changes, returns the selected option value |$3
Applied automatically to
select[multiple] elements.| Property | Type | Default | Description |
|----------|------|---------|-------------|
|
id | string | Required | Unique identifier for the select element |
| selection | T[] | [] | Currently selected values array |
| tall | 'sm' \| 'lg' | undefined | Size variant of the select |
| disabled | boolean | false | Disabled state of the select |#### Events
| Event | Type | Description |
|-------|------|-------------|
|
selectionChange | T[] | Emitted when selection changes, returns the array of selected option values |$3
Applied automatically to
option elements.| Property | Type | Default | Description |
|----------|------|---------|-------------|
|
value | any | undefined | Option value (alternative to HTML value attribute) |
| ngValue | any | undefined | Object value for the option (takes precedence over value) |How It Works
$3
The select directives automatically:
1. Map option values: Converts between HTML option indices and actual values
2. Handle selection events: Processes change events and emits typed values
3. Manage state: Tracks selected options and updates selection accordingly
4. Type conversion: Handles both primitive values and complex objects$3
- Single Selection: Returns the selected value directly (T | undefined)
- Multiple Selection: Returns an array of selected values (T[])
- Automatic Detection: Uses the multiple attribute to determine behavior$3
1. ngValue: Takes highest precedence for object values
2. value: Used for primitive values
3. Automatic ID: Generates unique IDs for options if not providedBootstrap Classes Support
This library generates and works with standard Bootstrap 5 select classes:
-
form-select - Base select styling
- form-select-sm - Small select variant
- form-select-lg - Large select variant
- form-select-option - Applied to option elements
Dependencies
- Angular: >=20.2.1
- @angular/common: >=20.2.1
- @pmeig/ngb-core: ^0.0.1
- tslib: ^2.3.0
Compatibility
- Angular: 20.2.1+
- Bootstrap: 5.3.3+
- TypeScript: 5.8.3+
- Modern browsers (Chrome, Firefox, Safari, Edge)
Troubleshooting
$3
Error: "id is required for select"
- The
id attribute is required for all select elements
- Ensure you've set a unique ID: