Angular PrimeNG Form InputNumber Styling Component

Angular PrimeNG is a UI component catalog for angular applications. It consists of a wide range of UI components that help in making fast and scalable websites. This article will see the Angular PrimeNG Form InputNumber Styling Component.

The Form InputNumber Component is used to take numerical input from the user. The custom styling of the InputNumber component can be done using the structural style classes listed below.

Angular PrimeNG Form InputNumber Styling Classes:

• p-inputnumber: This class is applied to the container element.
• p-inputnumber-stacked: This class is applied to the container element with stacked buttons.
• p-inputnumber-horizontal: This class is applied to the container element with horizontal buttons.
• p-inputnumber-vertical: This class is applied to the container element with vertical buttons.
• p-inputnumber-input: This class is applied to the input element.
• p-inputnumber-button: This class is applied to the input element.
• p-inputnumber-button-up: This class is applied to the increment button of the input.
• p-inputnumber-button-down: This class is applied to the decrement button of the input.
• p-inputnumber-button-icon: This class is applied to the icon of the button.

Syntax:

// File: app.component.html
<p-inputNumber [(ngModel)]="..."></p-inputNumber>

// File: app.component.css
:host ::ng-deep .Styling-Class{
    // CSS Properties
}

Creating Angular application & module installation:

Step 1: Create an Angular application using the below command.

ng new newapp

Step 2: After creating your project folder i.e. newapp, move to it using the below command.

cd newapp

Step 3: Install PrimeNG and PrimeIcons in your project directory.

npm install primeng --save
npm install primeicons --save

Project Structure: After complete installation, the project structure will look like the following:

Project Structure

Example 1: In this example, we used the p-inputnumber and p-inputnumber-input styling classes to set the border color and the text color of the input to green.

• app.component.html:

HTML

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

    <p-inputNumber
        [(ngModel)]="numValue">
    </p-inputNumber>
</div>

• app.component.css:

CSS

:host ::ng-deep .p-inputnumber {
    border: 2px solid green;
}

:host ::ng-deep .p-inputnumber
    .p-inputnumber-input:enabled:focus,
:host ::ng-deep .p-inputnumber
    .p-inputnumber-input{
    box-shadow: none;
    color: green;
}

• app.component.ts:

Javascript

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

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    numValue?: number;
}

• 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: In this example, we used the p-inputnumber-button-up and p-inputnumber-button-down classes to change the increment and decrement button styles.

• app.component.html:

HTML

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

    <p-inputNumber
        [showButtons]="true"
        buttonLayout="horizontal"
        [(ngModel)]="numValue">
    </p-inputNumber>
</div>

• app.component.css:

CSS

:host ::ng-deep .p-inputnumber-button-up ,
:host ::ng-deep .p-inputnumber-button-down{
    border-radius: 50%;
    border: none;
    margin: 0 10px;
    background-color: coral;
}

• app.component.ts:

Javascript

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

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    numValue?: number;
}

• 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: http://primefaces.org/primeng/inputnumber