Componente de grupo 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 InputGroup en angular primeNG.

El componente InputGroup permite a un usuario ingresar contenido.

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 InputGroup 

aplicación.componente.html

<h2>GeeksforGeeks</h2> <h5>PrimeNG InputGroup component</h5>    <div class="p-col-12 p-md-4">   <div class="p-inputgroup">     <input type="text" pInputText placeholder="InputGroup" />     <input type="text" pInputText placeholder="InputGroup" />     <input type="text" pInputText placeholder="InputGroup" />   </div> </div>

aplicación.módulo.ts

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

Producción:



Ejemplo 2: en este ejemplo, sabremos cómo usar la propiedad deshabilitada en el componente InputGroup 

aplicación.componente.html

<h2>GeeksforGeeks</h2> <h5>PrimeNG InputGroup component</h5>    <div class="p-col-12 p-md-4">   <div class="p-inputgroup">     <input type="text" disabled pInputText placeholder="InputGroup" />     <input type="text" disabled pInputText placeholder="InputGroup" />     <input type="text" disabled pInputText placeholder="InputGroup" />   </div> </div>

aplicación.módulo.ts

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

Producción:



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