Angular PrimeNG Form Inputtext Properties Component
Last Updated :
18 Oct, 2022
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.
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"
/>
|
Javascript
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent { }
|
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.
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"
/>
|
Javascript
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {}
|
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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...