Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will know how to use the InputNumber component in Angular PrimeNG. We will also learn about the properties, events, methods & styling along with their syntaxes that will be used in the code.
InputNumber component: It allows a user to input content as a numerical value.
Properties:
- value: It is used to give the value of the checkbox. It is of number data type, the default value is null.
- format: It is used to set whether to format the value. It is of boolean data type, the default value is true.
- showButtons: It is used to display spinner buttons. It is of boolean data type, the default value is false.
- buttonLayout: It is used to set the layout of the buttons, valid values are “stacked” (default), “horizontal” and “vertical”. It is of string data type, the default value is stacked.
- incrementButtonClass: It is used to set the style class of the increment button. It is of string data type, the default value is null.
- decrementButtonClass: It is used to set the style class of the decrement button. It is of string data type, the default value is null.
- incrementButtonIcon: It is used to set the style class of the increment button. It is of string data type, the default value is pi pi-chevron-up.
- decrementButtonIcon: It is used to set the style class of the decrement button. It is of string data type, the default value is pi pi-chevron-down.
- locale: It is used to set the locale to be used in formatting. It is of string data type, the default value is null.
- localeMatcher: It is used to set the locale matching algorithm to use. It is of string data type, the default value is the best fit.
- mode: It is used to define the behavior of the component, valid values are “decimal” and “currency”. It is of string data type, the default value is decimal.
- prefix: It is used to set the text to display before the value. It is of string data type, the default value is null.
- suffix: It is used to set the text to display after the value. It is of string data type, the default value is decimal.
- currency: It is used to set the currency to use in currency formatting. It is of string data type, the default value is null.
- currencyDisplay: It is used to specify how to display the currency in currency formatting. It is of string data type, the default value is a symbol.
- useGrouping: It is used to set whether to use grouping separators, such as thousands of separators or thousand/lakh/crore separators. It is of boolean data type, the default value is true.
- minFractionDigits: It is used to set the minimum number of fraction digits to use. It is of number data type, the default value is null.
- maxFractionDigits: It is used to set the maximum number of fraction digits to use. It is of number data type, the default value is null.
- min: It is used to set the minimum boundary value. It is of number data type, the default value is null.
- max: It is used to set the maximum boundary value. It is of number data type, the default value is null.
- step: It is used to set the step factor to increment/decrement the value. It is of number data type, the default value is 1.
- style: It is used to set the inline style of the component. It is of string data type, the default value is null.
- styleClass: It is used to set the style class of the component. It is of string data type, the default value is null.
- inputId: It is an ID identifier of the underlying input element It is of string data type, the default value is null.
- inputStyle: It is used to set the inline style of the input field. It is of string data type, the default value is null.
- inputStyleClass: It is used to set the style class of the input field. It is of string data type, the default value is null.
- placeholder: It is used to set the advisory information to display on input. It is of string data type, the default value is null.
- size: It is used to set the size of the input field. It is of number data type, the default value is null.
- maxlength: It is used to set the maximum number of characters allows in the input field. It is of number data type, the default value is null.
- tabindex: It is used to set the specified tab order of the element. It is of number data type, the default value is null.
- disabled: it specifies that the element should be disabled. It is of boolean data type, the default value is false.
- title: It is used to set the title text of the input text. It is of string data type, the default value is null.
- ariaLabel: It is used to define a string that labels the input element. It is of string data type, the default value is null.
- ariaRequired: It is used to indicate that user input is required on an element before a form can be submitted. It is of boolean data type, the default value is false.
- name: It is used to set the name of the input field. It is of string data type, the default value is null.
- autocomplete: It is used to define a string that autocompletes attributes to the current element. It is of string data type, the default value is null.
- showClear: It is used to display a clear icon to clear the value. It is of boolean data type, the default value is false
Methods:
- getFormatter: This method returns Intl.NumberFormat object.
Events:
- onFocus: It is a callback that is fired when input receives focus.
- onBlur: It is a callback that is fired when input loses focus.
- onInput: It is a callback that is fired when the input value is entered.
- event.value: It is a callback that is fired when the value is entered.
Styling:
- p-inputnumber: It is the container element.
- p-inputnumber-stacked: It is the container element with stacked buttons.
- p-inputnumber-horizontal: It is the container element with horizontal buttons.
- p-inputnumber-vertical: It is the container element with vertical buttons.
- p-inputnumber-input: It is the input element.
- p-inputnumber-button: It is the input element.
- p-inputnumber-button-up: It is the increment button.
- p-inputnumber-button-down: It is the decrement button.
- p-inputnumber-button-icon: It is the button icon.
Creating Angular application & module installation:
- Step 1: Create an Angular application using the following command.
ng new appname
- Step 2: After creating your project folder i.e. appname, move to it using the following command.
cd appname
- Step 3: Install PrimeNG in your given directory.
npm install primeng --save npm install primeicons --save
Project Structure: It will look like the following:
Example 1: This is the basic example that illustrates how to use the InputNumber component.
app.component.html
<h2>GeeksforGeeks</h2>
<h5>PrimeNG inputNumber component</h5>
<div class="p-grid p-fluid">
<div class="p-field p-col-12 p-md-3">
<p-inputNumber placeholder="Input number here">
</p-inputNumber>
</div>
</div>
|
app.module.ts
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { AppComponent } from "./app.component";
import { InputNumberModule } from "primeng/inputnumber";
@NgModule({ imports: [BrowserModule, InputNumberModule],
declarations: [AppComponent],
bootstrap: [AppComponent],
}) export class AppModule {} |
app.component.ts
import { Component } from "@angular/core";
@Component({ selector: "my-app",
templateUrl: "./app.component.html",
}) export class AppComponent {} |
Output:
Example 2: In this example, we will know how to use prefix & suffix property in the InputNumber component.
app.component.html
<h2>GeeksforGeeks</h2>
<h5>PrimeNG inputNumber component</h5>
<div class="p-field p-col-12 p-md-3">
<label for="gfg">Prefix and Suffix Property</label>
<p-inputNumber inputId="gfg" suffix=")" prefix="(" placeholder="()">
</p-inputNumber>
</div>
|
app.module.ts
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { AppComponent } from "./app.component";
import { InputNumberModule } from "primeng/inputnumber";
@NgModule({ imports: [BrowserModule, InputNumberModule],
declarations: [AppComponent],
bootstrap: [AppComponent],
}) export class AppModule {} |
app.component.ts
import { Component } from "@angular/core";
@Component({ selector: "my-app",
templateUrl: "./app.component.html",
}) export class AppComponent {} |
Output:
Reference: https://primeng.org/inputnumber