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;">GeeksforGeeks</h1>
    <h3>A computer science portal for geeks</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;">GeeksforGeeks</h1>
    <h3>A computer science portal for geeks</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