A powerful Angular library that provides Bootstrap-styled input components with advanced features like automatic type detection, date handling, input groups, and smart value mapping.
npm install @pmeig/ngb-inputA powerful Angular library that provides Bootstrap-styled input components with advanced features like automatic type detection, date handling, input groups, and smart value mapping.
bash
npm install @pmeig/ngb-input
`
Features
- 🎯 BInputDirective - Smart input directive with automatic Bootstrap styling
- 📅 BInputDateDirective - Advanced date input handling with multiple date formats
- 📦 BInputGroupDirective - Bootstrap input group functionality with automatic text styling
- 🔄 Smart Value Mapping - Automatic conversion between different data types
- ✨ Type Detection - Automatic styling based on input type
- 📝 Describe Support - Built-in help text functionality
- 🎨 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 { InputMaterial } from '@pmeig/ngb-input';@NgModule({
imports: [
InputMaterial
],
// ...
})
export class AppModule { }
`
$3
`html
`
$3
`html
describe="We'll never share your email with anyone else."
placeholder="Enter email">
[describe]="passwordHelp"
placeholder="Enter password">
Password must contain at least 8 characters including numbers and symbols.
`
$3
`html
`
$3
`html
`
$3
`html
@
$
.00
`$3
`html
value="Read-only value"
[readonly]="true">
placeholder="Controlled input"
formControlName="disabledField">
`
API Reference
$3
Applied automatically to most input types (excludes date inputs).
| Property | Type | Default | Description |
|----------|------|---------|-------------|
|
describe | string \| TemplateRef | undefined | Help text or template for the input |
| value | InputValue | undefined | Input value with smart type conversion |
| type | string | 'text' | Input type attribute |
| readonly | boolean | false | Makes the input read-only |#### Events
| Event | Type | Description |
|-------|------|-------------|
|
valueChange | InputValue \| null | Emitted when input value changes with converted type |$3
Applied automatically to date-related input types.
| Property | Type | Default | Description |
|----------|------|---------|-------------|
|
date-type | 'ts-date' \| 'ngp-date' | 'ts-date' | Date conversion format |$3
Applied to
input-group elements and [input-group] attribute.| Property | Type | Default | Description |
|----------|------|---------|-------------|
|
size | 'sm' \| 'md' \| 'lg' | undefined | Input group size |
| input-group | 'sm' \| 'md' \| 'lg' | 'md' | Alternative size specification |Date Type Conversion
$3
Returns standard JavaScript Date objects:
`typescript
selectedDate: Date = new Date();
`
$3
Returns structured date objects:
`typescript
interface NgpDate {
year: number;
month: number; // 1-12
day: number;
date: { year: number; month: number; day: number };
}interface NgpDateTime extends NgpDate {
hour: number;
minute: number;
second: number;
millisecond: number;
time: { hour: number; minute: number; second: number; millisecond: number };
}
`
How It Works
$3
The input directives automatically:
1. Detect input types: Examines the input element's type attribute
2. Apply appropriate classes: Uses form-control, form-check-input, or form-range
3. Manage parent containers: Creates form-check containers for checkboxes/radios
4. Handle value conversion: Converts between different data types based on input type$3
- String inputs: Direct value mapping
- Date inputs: Converts between Date objects and input string formats
- Number inputs: Automatic number conversion
- Boolean inputs: Checkbox/radio value handling$3
- Text conversion: Non-form elements become input-group-text
- Label handling: Repositions labels appropriately
- Size management: Applies Bootstrap sizing classes
- Button integration: Handles buttons within input groupsBootstrap Classes Support
This library generates and works with standard Bootstrap 5 input classes:
-
form-control - Applied to text, email, password, number, etc.
- form-check-input - Applied to checkbox and radio inputs
- form-range - Applied to range inputs
- form-text - Applied to description elements
- input-group - Container for input groups
- input-group-text - Text elements within input groups
- input-group-sm, input-group-lg - Size variantsDependencies
- 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
Input styling not applying correctly
- Check that the input type is correctly detected
- Verify form-control classes are being applied
Date conversion not working
- Ensure the correct
date-type` is specifiedInput groups not displaying correctly
- Check that child elements are direct descendants
- Ensure proper Bootstrap structure is maintained
- Verify size attributes are valid
Value changes not emitting
- Check that the input is not readonly or disabled
- Ensure proper event binding syntax
- Verify form control state
This project is licensed under the MIT License.
For issues and questions, please open an issue on the GitHub repository.