@pmeig/ngb-input
Advanced tools
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.
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-input
import { InputMaterial } from '@pmeig/ngb-input';
@NgModule({
imports: [
InputMaterial
],
// ...
})
export class AppModule { }
<!-- Text input -->
<input type="text" placeholder="Enter your name">
<!-- String description -->
<input type="email"
describe="We'll never share your email with anyone else."
placeholder="Enter email">
<!-- Template description -->
<input type="password"
[describe]="passwordHelp"
placeholder="Enter password">
<ng-template #passwordHelp>
Password must contain at least <strong>8 characters</strong> including numbers and symbols.
</ng-template>
<!-- Regular text input (gets form-control) -->
<input type="text" placeholder="Text input">
<!-- Checkbox input (gets form-check-input) -->
<input type="checkbox" value="option1">
<!-- Radio input (gets form-check-input) -->
<input type="radio" name="options" value="option1">
<!-- Range input (gets form-range) -->
<input type="range" min="0" max="100" value="50">
<!-- Date input with TypeScript Date object -->
<input type="date" [date-type]="'ts-date'" [(value)]="selectedDate">
<!-- Date input with NGP Date structure -->
<input type="date" [date-type]="'ngp-date'" [(value)]="ngpDateObject">
<!-- DateTime input with NGP DateTime -->
<input type="datetime-local" [date-type]="'ngp-date'" [(value)]="dateTimeObject">
<!-- Month input -->
<input type="month" [date-type]="'ts-date'" [(value)]="selectedMonth">
<!-- Time input -->
<input type="time" [date-type]="'ngp-date'" [(value)]="selectedTime">
<!-- Week input -->
<input type="week" [date-type]="'ngp-date'" [(value)]="selectedWeek">
<!-- Basic input group -->
<input-group>
<span>@</span>
<input type="text" placeholder="Username">
</input-group>
<!-- Input group with size -->
<input-group size="lg">
<span>$</span>
<input type="number" placeholder="0.00">
<span>.00</span>
</input-group>
<!-- Small input group -->
<input-group size="sm">
<input type="text" placeholder="Small input">
<button type="button">Go</button>
</input-group>
<!-- Readonly input -->
<input type="text"
value="Read-only value"
[readonly]="true">
<!-- Disabled through form control -->
<input type="text"
placeholder="Controlled input"
formControlName="disabledField">
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 |
| Event | Type | Description |
|---|---|---|
valueChange | InputValue | null | Emitted when input value changes with converted type |
Applied automatically to date-related input types.
| Property | Type | Default | Description |
|---|---|---|---|
date-type | 'ts-date' | 'ngp-date' | 'ts-date' | Date conversion format |
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 |
ts-date)Returns standard JavaScript Date objects:
selectedDate: Date = new Date();
ngp-date)Returns structured date objects:
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 };
}
The input directives automatically:
form-control, form-check-input, or form-rangeinput-group-textThis 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 inputsform-range - Applied to range inputsform-text - Applied to description elementsinput-group - Container for input groupsinput-group-text - Text elements within input groupsinput-group-sm, input-group-lg - Size variantsInput styling not applying correctly
Date conversion not working
date-type is specifiedInput groups not displaying correctly
Value changes not emitting
This project is licensed under the MIT License.
For issues and questions, please open an issue on the GitHub repository.
FAQs
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.
The npm package @pmeig/ngb-input receives a total of 3 weekly downloads. As such, @pmeig/ngb-input popularity was classified as not popular.
We found that @pmeig/ngb-input demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.