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:
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;" >w3wiki</ h1 > < h3 >A computer science portal for Beginner</ 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;" >w3wiki</ h1 > < h3 >A computer science portal for Beginner</ 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