Componente InputNumber de Angular PrimeNG

Angular PrimeNG es un marco de trabajo de código abierto con un amplio conjunto de componentes nativos de la interfaz de usuario de Angular que se utilizan para lograr un gran estilo y este marco se utiliza para crear sitios web receptivos con mucha facilidad. En este artículo, sabremos cómo usar el componente InputNumber en Angular PrimeNG. También aprenderemos sobre las propiedades, eventos, métodos y estilo junto con sus sintaxis que se usarán en el código. 

Componente InputNumber: permite a un usuario ingresar contenido como un valor numérico.

Propiedades:

• valor : Se utiliza para dar el valor de la casilla de verificación. Es de tipo de dato numérico, el valor por defecto es nulo.
• formato : se utiliza para establecer si se formatea el valor. Es de tipo de datos booleano, el valor predeterminado es verdadero.
• showButtons : se utiliza para mostrar botones giratorios. Es de tipo de dato booleano, el valor por defecto es false.
• buttonLayout : Se utiliza para establecer el diseño de los botones, los valores válidos son «apilados» (predeterminado), «horizontal» y «vertical». Es de tipo de datos de string, el valor predeterminado es apilado.
• incrementButtonClass : se utiliza para establecer la clase de estilo del botón de incremento. Es de tipo de datos de string, el valor predeterminado es nulo.
• decrementButtonClass : se utiliza para establecer la clase de estilo del botón de decremento. Es de tipo de datos de string, el valor predeterminado es nulo.
• incrementButtonIcon : se utiliza para establecer la clase de estilo del botón de incremento. Es de tipo de datos de string, el valor predeterminado es pi pi-chevron-up.
• decrementButtonIcon : se utiliza para establecer la clase de estilo del botón de decremento. Es de tipo de datos de string, el valor predeterminado es pi pi-chevron-down.
• locale : se utiliza para establecer la configuración regional que se utilizará en el formateo. Es de tipo de datos de string, el valor predeterminado es nulo.
• localeMatcher : se utiliza para configurar el algoritmo de coincidencia de configuración regional que se utilizará. Es del tipo de datos de string, el valor predeterminado es el que mejor se ajusta.
• modo : Se utiliza para definir el comportamiento del componente, los valores válidos son «decimal» y «moneda». Es de tipo de datos de string, el valor predeterminado es decimal.
• prefijo : se utiliza para establecer el texto que se mostrará antes del valor. Es de tipo de datos de string, el valor predeterminado es nulo.
• sufijo : se utiliza para configurar el texto que se mostrará después del valor. Es de tipo de datos de string, el valor predeterminado es decimal.
• moneda : se utiliza para establecer la moneda que se utilizará en el formato de moneda. Es de tipo de datos de string, el valor predeterminado es nulo.
• currencyDisplay : se utiliza para especificar cómo mostrar la moneda en formato de moneda. Es de tipo de datos de string, el valor predeterminado es un símbolo.
• useGrouping : se utiliza para establecer si se utilizan separadores de agrupación, como separadores de miles o separadores de miles/lakh/crore. Es de tipo de datos booleano, el valor predeterminado es verdadero.
• minFractionDigits : Se utiliza para establecer el número mínimo de dígitos de fracción a utilizar. Es de tipo de dato numérico, el valor por defecto es nulo.
• maxFractionDigits : se utiliza para establecer el número máximo de dígitos de fracción a utilizar. Es de tipo de dato numérico, el valor por defecto es nulo.
• min : Se utiliza para establecer el valor límite mínimo. Es de tipo de dato numérico, el valor por defecto es nulo.
• max : se utiliza para establecer el valor límite máximo. Es de tipo de dato numérico, el valor por defecto es nulo.
• step : Se utiliza para establecer el factor de paso para incrementar/disminuir el valor. Es de tipo de dato numérico, el valor por defecto es 1.
• style : se utiliza para establecer el estilo en línea del componente. Es de tipo de datos de string, el valor predeterminado es nulo.
• styleClass : se utiliza para establecer la clase de estilo del componente. Es de tipo de datos de string, el valor predeterminado es nulo.
• inputId : es un identificador de ID del elemento de entrada subyacente. Es de tipo de datos de string, el valor predeterminado es nulo.
• inputStyle : se utiliza para establecer el estilo en línea del campo de entrada. Es de tipo de datos de string, el valor predeterminado es nulo.
• inputStyleClass : se utiliza para establecer la clase de estilo del campo de entrada. Es de tipo de datos de string, el valor predeterminado es nulo.
• marcador de posición : se utiliza para configurar la información de asesoramiento para mostrar en la entrada. Es de tipo de datos de string, el valor predeterminado es nulo.
• tamaño : se utiliza para establecer el tamaño del campo de entrada. Es de tipo de dato numérico, el valor por defecto es nulo.
• maxlength : se utiliza para establecer el número máximo de caracteres permitidos en el campo de entrada. Es de tipo de dato numérico, el valor por defecto es nulo.
• tabindex : se utiliza para establecer el orden de tabulación especificado del elemento. Es de tipo de dato numérico, el valor por defecto es nulo.
• disabled : especifica que el elemento debe estar deshabilitado. Es de tipo de dato booleano, el valor por defecto es false.
• title : Se utiliza para establecer el texto del título del texto de entrada. Es de tipo de datos de string, el valor predeterminado es nulo.
• ariaLabel : se utiliza para definir una string que etiqueta el elemento de entrada. Es de tipo de datos de string, el valor predeterminado es nulo.
• ariaRequired : se utiliza para indicar que se requiere la entrada del usuario en un elemento antes de que se pueda enviar un formulario. Es de tipo de dato booleano, el valor por defecto es false.
• nombre : se utiliza para establecer el nombre del campo de entrada. Es de tipo de datos de string, el valor predeterminado es nulo.
• autocompletar : se utiliza para definir una string que autocompleta los atributos del elemento actual. Es de tipo de datos de string, el valor predeterminado es nulo.

Métodos:

• getFormatter: este método devuelve el objeto Intl.NumberFormat.

Eventos:

• onFocus: es una devolución de llamada que se activa cuando la entrada recibe el foco.
• onBlur : es una devolución de llamada que se activa cuando la entrada pierde el foco.
• onInput : es una devolución de llamada que se activa cuando se ingresa el valor de entrada.
• event.value : es una devolución de llamada que se activa cuando se ingresa el valor.

Estilo:

• p-inputnumber: Es el elemento contenedor.
• p-inputnumber-stacked: Es el elemento contenedor con botones apilados.
• p-inputnumber-horizontal: Es el elemento contenedor con botones horizontales.
• p-inputnumber-vertical: Es el elemento contenedor con botones verticales.
• p-inputnumber-input: Es el elemento de entrada.
• p-inputnumber-button: Es el elemento de entrada.
• p-inputnumber-button-up: Es el botón de incremento.
• p-inputnumber-button-down: Es el botón de decremento.
• p-inputnumber-button-icon: Es el icono del botón.

Creación de aplicaciones angulares e instalación de módulos:

• Paso 1: Cree una aplicación Angular usando el siguiente comando.

ng new appname

• Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la aplicación, muévase a ella con el siguiente comando.

cd appname

• Paso 3: Instale PrimeNG en su directorio dado.

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

Estructura del proyecto: se verá así:

Ejemplo 1: Este es el ejemplo básico que ilustra cómo usar el componente InputNumber. 

<h2>GeeksforGeeks</h2>
<h5>PrimeNG inputNumber component</h5>
<div class="p-grid p-fluid">
  <div class="p-field p-col-12 p-md-3">
    <p-inputNumber placeholder="Input number here">
    </p-inputNumber>
  </div>
</div>

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { AppComponent } from "./app.component";
  
import { InputNumberModule } from "primeng/inputnumber";
  
@NgModule({
  imports: [BrowserModule, InputNumberModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

import { Component } from "@angular/core";
  
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
})
export class AppComponent {}

Producción:

Ejemplo 2: En este ejemplo, sabremos cómo usar la propiedad de prefijo y sufijo en el componente InputNumber.

<h2>GeeksforGeeks</h2>
<h5>PrimeNG inputNumber component</h5>
<div class="p-field p-col-12 p-md-3">
  <label for="gfg">Prefix and Suffix Property</label>
  <p-inputNumber inputId="gfg" suffix=")" 
                 prefix="(" placeholder="()">
  </p-inputNumber>
</div>

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { AppComponent } from "./app.component";
  
import { InputNumberModule } from "primeng/inputnumber";
  
@NgModule({
  imports: [BrowserModule, InputNumberModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

import { Component } from "@angular/core";
  
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
})
export class AppComponent {}

Producción:

Referencia: https://primefaces.org/primeng/showcase/#/inputnumber