Componente InputTextArea 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 InputTextArea en angular primeNG.

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

Propiedades:

• autoResize: Podemos establecer si el tamaño del área de texto debe aumentar al aumentar el texto. El área de texto no mostrará la barra de desplazamiento a medida que aumenta el tamaño del área de texto. Por esta razón, es posible que necesitemos definir la propiedad de fila y columna.
• disabled: podemos configurar el componente textarea para que esté deshabilitado.

Eventos:

• onResize: cuando un elemento cambia de tamaño, se invoca una devolución de llamada.

Estilo:

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

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 InputTextArea 

<h2>GeeksforGeeks</h2>
<h5>PrimeNG inputTextArea component</h5>
<textarea rows="4" cols="35" pInputTextarea></textarea>

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

Producción:

Ejemplo 2: En este ejemplo, sabremos cómo usar la propiedad disabled en el componente InputTextArea 

<h2>GeeksforGeeks</h2>
<h5>PrimeNG inputTextArea component</h5>
<textarea rows="4" cols="35" pInputTextarea disabled></textarea>

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

Producción:

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