Angular PrimeNG输入组组件

Angular PrimeNG是一个开源框架，它有丰富的原生Angular UI组件，可以用来做很好的造型，这个框架用来做响应式网站，非常方便。在这篇文章中，我们将了解如何在Angular primeNG中使用InputGroup组件。

InputGroup组件允许用户输入内容。

创建Angular应用程序和模块安装。

• 第1步：使用以下命令创建一个Angular应用程序。

ng new appname

• 第2步：在创建你的项目文件夹即appname后，使用以下命令移动到它。

cd appname

• 第3步：在你给定的目录中安装PrimeNG。

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

项目结构。它将看起来像以下。

例子1：这是一个基本的例子，说明如何使用InputGroup组件。

    <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>

    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 {}

输出:

实例2：在这个例子中，我们将知道如何在InputGroup组件中使用disabled属性。

    <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>

javascript 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 {}

输出: