@pmeig/ngb-input

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.

Installation

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




Go

`

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

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

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

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 specified
- Check that the input value matches the expected format
- Verify NgpDatePipe is properly configured

Input 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

License

This project is licensed under the MIT License.

Support

For issues and questions, please open an issue on the GitHub repository.