Angular PrimeNG Form Inputtext Properties Component

Angular PrimeNG is a UI component catalog for angular applications. It consists of a wide range of UI components that help in making fast and scalable websites. In this article, we will see Angular PrimeNG Form Inputtext Properties 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.

Angular PrimeNG Form Inputtext Properties: InputText has only one property which is explained below.

• disabled: This is a boolean property. When it is present, the input element will be disabled.

Syntax:

<input type="text" pInputText disabled/>

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: This example shows the use of the disabled property of the InputText component to disable the input element.

• app.component.html:

HTML

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

<h3 class="mt-4">Default InputText</h3>
<input
    pInputText
    [(ngModel)]="textVal1"
/>

<h3 class="mt-4">Disabled InputText</h3>
<input
    disabled
    pInputText
    [(ngModel)]="textVal2"
/>

• 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 { InputSwitchModule } from 'primeng/inputswitch';

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

export class AppModule { }

Output:

Example 2: In this example, we used an InputSwitch to control the disabled property 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
    Properties Component
</h4>

<h3 class="mt-4">Disable InputText with Switch</h3>

<p-inputSwitch
    styleClass="mb-3"
    [(ngModel)]="isDisabled">
</p-inputSwitch>
<br>
<input
    [disabled]="isDisabled"
    pInputText
    [(ngModel)]="textVal1"
/>

• 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 { InputSwitchModule } from 'primeng/inputswitch';

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

export class AppModule { }

Output:

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