Angular PrimeNG Form InputNumber Events 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 Events Component.
The Form InputNumber Component is used to take numerical input from the user. The InputNumber component can be bound to a number variable using the ngModel directive provided by Angular itself.
Angular PrimeNG Form InputNumber Events:
- onFocus: This event takes a callback function which is invoked when input comes into focus.
- onBlur: This event takes a callback function which is invoked when input loses focus.
- onInput: This callback is triggered when a value is entered in the input.
- onClear: This callback is triggered when the input is cleared.
Syntax:
<p-inputNumber [(ngModel)]="..." (event-name)="callback()"> </p-inputNumber>
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 onFocus and onBlur events of the InputNumber component to display a toast message.
- app.component.html
HTML
< div > < h1 style = "color:green;" >w3wiki</ h1 > < h3 >A computer science portal for Beginner</ h3 > < h4 >Angular PrimeNG Form InputNumber Events Component </ h4 > < p-inputNumber [(ngModel)]="numValue" (onBlur)="handleInputBlur($event)" (onFocus)="handleInputFocus($event)"> </ p-inputNumber > < p-toast ></ p-toast > </ div > |
- app.component.ts
Javascript
import { Component } from '@angular/core' ; import { MessageService } from 'primeng/api' ; @Component({ selector: 'app-root' , templateUrl: './app.component.html' , styleUrls: [ './app.component.css' ], providers: [MessageService] }) export class AppComponent { numValue?: number; constructor(private messageservice: MessageService) { } handleInputFocus($event: any) { this .messageservice.add({ severity: 'success' , summary: 'Input Focused' , detail: 'onFocus event triggered' }) } handleInputBlur($event: any) { this .messageservice.add({ severity: 'error' , summary: 'Input Lost Focused' , detail: 'onBlur event triggered' }) } } |
- 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' ; import { ToastModule } from 'primeng/toast' ; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule, InputNumberModule, FormsModule, ToastModule ], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } |
Output:
Example 2: In this example, we used the onInput and onClear events of the InputNumber component to show a toast message when any value is entered and upon the clearing of the input.
- app.component.html
HTML
< div > < h1 style = "color:green;" >w3wiki</ h1 > < h3 >A computer science portal for Beginner</ h3 > < h4 >Angular PrimeNG Form InputNumber Events Component </ h4 > < h3 > Shows a toast message when anything < br > is input or cleared from the InputNumber </ h3 > < p-inputNumber [(ngModel)]="numValue" [showClear]="true" (onInput)="handleOnInput($event)" (onClear)="handleOnClear($event)"> </ p-inputNumber > < p-toast ></ p-toast > </ div > |
- app.component.ts
Javascript
import { Component } from '@angular/core' ; import { MessageService } from 'primeng/api' ; @Component({ selector: 'app-root' , templateUrl: './app.component.html' , styleUrls: [ './app.component.css' ], providers: [MessageService] }) export class AppComponent { numValue?: number; constructor(private messageservice: MessageService) { } handleOnInput($event: any) { this .messageservice.add({ severity: 'success' , summary: 'Value Entered' , detail: $event.value }) } handleOnClear($event: any) { this .messageservice.add({ severity: 'error' , summary: 'Value Cleared' , detail: 'onClear event triggered' }) } } |
- 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' ; import { ToastModule } from 'primeng/toast' ; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule, InputNumberModule, FormsModule, ToastModule ], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } |
Output:
Reference: http://primefaces.org/primeng/inputnumber
Contact Us