Angular PrimeNG Form InputNumber Buttons 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 learn how to use the Form InputNumber Buttons Component in Angular PrimeNG. We will also learn about the properties, along with their syntaxes that will be used in the code.

The InputNumber Component allows a user to input content as a numerical value. Spinner buttons may be activated using the showButtons attribute, and buttonLayout controls layout. “Stacked” is the default value. The other two are “horizontal” and “stacked”. The up and down arrow keys on the keyboard may be used to rotate the values even though there are no buttons.

Syntax:

<p-inputNumber
    placeholder="..."
    [showButtons]="..."
    buttonLayout="...">
</p-inputNumber>

Angular PrimeNG Form InputNumber Buttons Component Properties:

• 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.
• placeholder: It is used to set the advisory information to display on input. It is of string data type, the default value is null.
• 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.
• 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.
• 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.

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:

Steps to run the application: Run the below command to see the output:

ng serve --save

Example 1: In the below code, we will be seeing the demonstration of the Angular PrimeNG Form InputNumber Buttons Component using buttonLayout=”horizontal”

• app.component.html:

HTML

<h1 style="color: green">GeeksforGeeks</h1>
<h5>
    Angular PrimeNG Form InputNumber
    Buttons Component
</h5>

<p-inputNumber
    placeholder="Input any number"
    [showButtons]="true"
    buttonLayout="horizontal">
</p-inputNumber>

• app.component.ts:

Javascript

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})

export class AppComponent { }

• app.module.ts:

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {FormsModule} from '@angular/forms';
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: Below is another code example that demonstrates the Angular PrimeNG Form InputNumber Buttons Component using buttonLayout=”vertical”

• app.component.html:

HTML

<h1 style="color: green">GeeksforGeeks</h1>
<h5>
    Angular PrimeNG Form InputNumber
    Buttons Component
</h5>

<p-inputNumber
    placeholder="Input any number"
    [showButtons]="true"
    buttonLayout="vertical">
</p-inputNumber>

• app.component.ts:

Javascript

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})

export class AppComponent { }

• app.module.ts:

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {FormsModule} from '@angular/forms';
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://primefaces.org/primeng/inputnumber