Componente de texto de entrada 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 InputText en angular primeNG. Aprendamos sobre las propiedades, el estilo y sus sintaxis que se utilizarán en el código. 

Componente InputTextArea: Es un elemento que se utiliza para crear un campo de texto con soporte de entrada de varias líneas.

Propiedades:

• disabled: podemos configurar el componente de entrada para que esté deshabilitado. Es de un tipo de datos booleano y el valor predeterminado es falso.

Estilo:

• p-inputtext: es una directiva y se aplica al campo de entrada de texto.

<input type="text" pInputText />

Enlace de modelo: la directiva ngModel se utiliza para enlazar el modelo.

<input type="text" pInputText [(ngModel)]="property"/>

Tamaño: además de los tamaños normales, hay más de 2 tamaños disponibles, agregue p-inputtext-sm para el ingreso de texto pequeño y agregue p-inputtext-lg para el ingreso de texto grande. Estas clases deben usarse para cambiar el tamaño del campo de entrada en particular.
Para texto de entrada más pequeño

<input type="text" pInputText class="p-inputtext-sm">

Para texto de entrada más grande

<input type="text" pInputText class="p-inputtext-lg"> 

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á como lo siguiente.

Ejemplo 1: Este es el ejemplo básico que muestra cómo usar el componente InputText 

<h2>GeeksforGeeks</h2>
<h5>PrimeNG InputText component</h5>
<div class="sizes">
  <input
    type="text"
    class="p-inputtext-lg"
    placeholder="Input text here"
    pInputText/>
</div>

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

Producción:

Ejemplo 2: En este ejemplo, sabremos cómo configurar el tamaño del componente InputText. 

<h2>GeeksforGeeks</h2>
<h5>PrimeNG InputText component</h5>
<div class="sizes">
  <input
    type="text"
    class="p-inputtext-sm"
    placeholder="Input text here"
    pInputText/>
  <input type="text" placeholder="Input text here" pInputText />
  <input
    type="text"
    class="p-inputtext-lg"
    placeholder="Input text here"
    pInputText/>
</div>

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } 
    from '@angular/platform-browser/animations';
  
import { AppComponent } from './app.component';
  
import { InputTextModule } from 'primeng/inputtext';
  
@NgModule({
  imports: [BrowserModule, 
              BrowserAnimationsModule, 
            InputTextModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

Producción:

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