Angular PrimeNG Form Inputtext Addons Component

Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will know how to use the Angular PrimeNG Form Inputtext Addons Component.

The Form InputText Component is used to render an input field to take text input from the user. The InputText can be applied to any text input using the pInputText directive. Other elements like text, icons, buttons, etc. can be grouped with text input by wrapping the other elements and the input field inside the p-inputgroup class. The addon elements should have a p-inputgroup-addon class applied to them.

Angular PrimeNG Form Inputtext Addons Properties:

• disabled: This property of the InputText is used to disable the input text.

Angular PrimeNG Form Inputtext Addons Classes:

• p-inputgroup-addon: This class is applied to the addons to be added with the input.
• p-inputgroup: This class wraps the input element and its add-ons.

Syntax:

<div class="p-inputgroup">
    <span class="p-inputgroup-addon">...</span>
    <input type="text" pInputText placeholder="...">
        ...
</div>

Creating Angular application & module installation:

Step 1: Create an Angular application using the below command.

ng new newapp

Step 2: After creating your project folder i.e. newapp, move to it using the below command.

cd newapp

Step 3: Install PrimeNG and PrimeIcons in your project directory.

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

Project Structure: After complete installation, the project structure will look like the following:

Example 1: In this example, we grouped an icon to the left and a button to the right of the input text.

• app.component.html:

HTML

<h1 style="color:green;">GeeksforGeeks</h1>
<h3>A computer science portal for geeks</h3>
<h4>
    Angular PrimeNG Form InputText
    Addons Component
</h4>

<div class="p-inputgroup" style="width: 350px;">
    <span class="p-inputgroup-addon">
        <i class="pi pi-at"></i>
    </span>
    <input type="text" pInputText placeholder="Enter the Email">
    <button class="p-inputgroup-addon"
         pButton label="Submit">
    </button>
</div>

• app.component.ts:

Javascript

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})

export class AppComponent { }

• app.module.ts:

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { InputTextModule } from 'primeng/inputtext';
import { ButtonModule } from 'primeng/button';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        InputTextModule,
        FormsModule,
        ButtonModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})

export class AppModule { }

Output:

Example 2: In this example, we grouped the text as an add-on at the end of the input text component.

• app.component.html:

HTML

<h1 style="color:green;">GeeksforGeeks</h1>
<h3>A computer science portal for geeks</h3>
<h4>
      Angular PrimeNG Form InputText
    Addons Component
</h4>

<div class="p-inputgroup" style="width: 350px;">
    <input type="text" pInputText
           placeholder="Enter the Email">
    <span class="p-inputgroup-addon">
      @geeksforgeeks.org</span>
</div>

• app.component.ts:

Javascript

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})

export class AppComponent { }

• app.module.ts:

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';
import { InputTextModule } from 'primeng/inputtext';
import { ButtonModule } from 'primeng/button';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        InputTextModule,
        FormsModule,
        ButtonModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})

export class AppModule { }

Output:

Reference: http://primefaces.org/primeng/inputtext