Angular PrimeNG Form InputNumber Styling Component
Last Updated :
25 Jan, 2023
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.
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 >
|
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 ;
}
|
Javascript
import { Component } from '@angular/core' ;
@Component({
selector: 'app-root' ,
templateUrl: './app.component.html' ,
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
numValue?: number;
}
|
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.
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 >
|
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;
}
|
Javascript
import { Component } from '@angular/core' ;
@Component({
selector: 'app-root' ,
templateUrl: './app.component.html' ,
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
numValue?: number;
}
|
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
Share your thoughts in the comments
Please Login to comment...