Angular PrimeNG Form InputNumber Properties Component

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.

The InputNumber component allows a user to input content as a numerical value.

Angular PrimeNG Form InputNumber Properties Component:

• 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 a boolean data type, and 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, and 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, and 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 allowed 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.

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:

Example 1: In the below code, we will be using the above properties to demonstrate the use of the Form InputNumber Properties Component.

• app.component.html

HTML

<div style="text-align:center;">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    <h3>
        A computer science portal for geeks
    </h3>
    <h4>
        Angular PrimeNG Form InputNumber Properties Component
    </h4>

    <div class="p-grid p-fluid">
        <div class="p-field p-col-12 p-md-3">
            <label for="integeronly">
                Only Integers
            </label>
            <p-inputNumber
                inputId="integeronly"
                [(ngModel)]="value1"
                name="integeronly"
            >
            </p-inputNumber>
        </div>
    </div>
</div>

• app.component.ts

Javascript

import { Component } from '@angular/core';
import { MenuItem } from 'primeng/api';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    value1: number = 97;
    value2: number = 9786;
}

• app.module.ts

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';

import { InputNumberModule } from 'primeng/inputnumber';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        InputNumberModule,
        FormsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})

export class AppModule { }

Output:

Example 2: In the below code, we will be using the above properties to demonstrate the use of the Form InputNumber Properties Component.

• app.component.html

HTML

<div style="text-align:center;">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    <h3>
        A computer science portal for geeks
    </h3>
    <h4>
        Angular PrimeNG Form InputNumber Properties Component
    </h4>

    <div class="p-grid p-fluid">
        <div class="p-field p-col-12 p-md-3">
            <label for="integeronly">
                Only Integers
            </label>
            <p-inputNumber
                inputId="integeronly"
                [(ngModel)]="value1"
                name="integeronly"
                disabled="true"
            >
            </p-inputNumber>
        </div>
    </div>
</div>

• app.component.ts

Javascript

import { Component } from '@angular/core';
import { MenuItem } from 'primeng/api';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    value1: number = 97;
    value2: number = 9786;
}

• app.module.ts

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';

import { InputNumberModule } from 'primeng/inputnumber';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        InputNumberModule,
        FormsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})

export class AppModule { }

Output:

Reference: https://www.primefaces.org/primeng/inputnumber