Numeric Input
Edit numbers, currency amounts and percentages with locale-aware formatting and Angular forms validation.
Import NgbNumericInputComponent and ReactiveFormsModule. Bind a FormControl<number | null>. Use min, max, step and precision to define accepted values.
Currency and percentage input
The following example demonstrates a USD transfer amount and an annual interest rate. Values commit on blur or Enter; invalid text leaves the previous model unchanged.
Enter 0–1,000,000. Up/Down changes the amount by 100.
Committed model: 2500
A model value of 0.0525 displays as 5.25%. A step of 0.0025 is 0.25 percentage points.
Committed model: 0.0525
import { Component } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { NgbNumericInputComponent } from '@angular-bootstrap/ngbootstrap';
@Component({
standalone: true,
imports: [ReactiveFormsModule, NgbNumericInputComponent],
template: `<ngb-numeric-input label="Transfer amount" [formControl]="amount"
format="currency" currency="USD" locale="en-US"
[min]="0" [max]="1000000" [precision]="2" [step]="100" />`,
})
export class TransferForm {
readonly amount = new FormControl<number | null>(2500);
}
Numeric editing
The following example demonstrates custom numeric editors for payment amounts and fees without aggregates. Choose Edit, change a value, then Save or Cancel. Use Undo and Redo after saving.
Payment | Reference | Amount (USD) | Fee (USD) | Actions | |
|---|---|---|---|---|---|
Edit an amount or fee, then Save. Undo and Redo replay saved edits.
Numeric editing with aggregates
The following example demonstrates branch totals and transaction counts. All values use USD. Pagination is disabled here, so each group footer covers its filtered rows across the full loaded dataset. Save updates the totals; Undo and Redo restore them. Invalid drafts and Cancel leave committed totals unchanged.
Payment | Reference | Amount (USD) | Fee (USD) | Actions | |
|---|---|---|---|---|---|
Total $20,521.008 transactions | Fees $23.00 | ||||
Total $21,523.008 transactions | Fees $23.00 | ||||
Total $22,525.008 transactions | Fees $23.00 | ||||
Edit an amount or fee, then Save. Undo and Redo replay saved edits.
<!-- Import NgbEditorTemplate, NgbNumericInputComponent and ReactiveFormsModule. -->
<ng-template ngbEditor="amount" let-control let-row="row">
<ngb-numeric-input [formControl]="control"
[ariaLabel]="'Amount for ' + row.id" format="currency" currency="USD"
[min]="0" [max]="1000000" [required]="true" />
</ng-template>
<!-- Group descriptors on the grid:
[{ field: 'branch', dir: 'asc', aggregates: [
{ field: 'amount', aggregate: 'sum' },
{ field: 'amount', aggregate: 'count' },
{ field: 'fee', aggregate: 'sum' }
]}]
Disable pagination for totals across all filtered loaded rows. -->
The editor uses the grid's existing form control. Handle rowSave to persist saved edits and history replay in your backend. These examples keep data in memory.
Formatting and validation
Use the same locale on server and browser (default: en-US). Valid values round to precision (0–12 display decimals). Invalid drafts keep the previous value; empty input becomes null unless required.
Keyboard and limitations
Enter commits, Up/Down steps within bounds, and Tab moves focus. Scrolling does not change values. Provide labels and linked error messages. For exact financial calculations, validate and calculate in your backend.