Angular PrimeNG Form Inputtext Styling Component
Last Updated :
19 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 Styling Component.
The Angular PrimeNG Form InputText Component renders a field for taking input of text data from the user. InputText can be applied to a text input element by applying the pInputText directive.
Angular PrimeNG Form InputText Directive:
- pInputText: This directive is used to apply InputText to an input element.
Angular PrimeNG Form InputText Styling Class: It has only one styling class which is given below.
- p-inputtext: This class is applied to the input element.
Syntax:
// In app.component.html
<input type="text" pInputText />
// In app.component.css
:host ::ng-deep .Styling-Classes {
// CSS Properties
}
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 used the p-inputtext class of the input text element to change the color of the text and the border to green.
HTML
< div >
< h1 style = "color:green;" >GeeksforGeeks</ h1 >
< h3 >A computer science portal for geeks</ h3 >
< h4 >Angular PrimeNG Form InputText
Styling Component
</ h4 >
< input type = "text"
pInputText
[(ngModel)]="textValue"
/>
</ div >
|
CSS
:host ::ng-deep .p-inputtext {
color : green ;
border : 2px solid green ;
border-radius: 10px ;
}
:host ::ng-deep .p-inputtext:focus:enabled,
:host ::ng-deep .p-inputtext:hover
{
box-shadow: none ;
border : 2px solid green ;
}
|
Javascript
import { Component } from '@angular/core' ;
@Component({
selector: 'app-root' ,
templateUrl: './app.component.html' ,
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
textValue: String = "" ;
}
|
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' ;
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
InputTextModule,
FormsModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
|
Output:
Example 2: In this example, we removed the border of the InputText and gave it a background color, also used the text-transform property to change the text to uppercase.
HTML
< div >
< h1 style = "color:green;" >GeeksforGeeks</ h1 >
< h3 >A computer science portal for geeks</ h3 >
< h4 >Angular PrimeNG Form InputText
Styling Component
</ h4 >
< h3 >Default InputText</ h3 >
< input type = "text"
pInputText
[(ngModel)]="textValue1"
/>
< h3 >Customised InputText</ h3 >
< input
class = "custom-text"
type = "text"
pInputText
[(ngModel)]="textValue2"
/>
</ div >
|
CSS
:host ::ng-deep .custom-text.p-inputtext {
border : none ;
padding : 12px ;
color : green ;
text-transform : uppercase ;
background : #ececec ;
border-radius: 10px
}
:host ::ng-deep .custom-text.p-inputtext:focus:enabled,
:host ::ng-deep .custom-text.p-inputtext:hover
{
box-shadow: none ;
background : #e2e2e2 ;
border : none ;
}
|
Javascript
import { Component } from '@angular/core' ;
@Component({
selector: 'app-root' ,
templateUrl: './app.component.html' ,
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
textValue1: String = "" ;
textValue2: String = "" ;
}
|
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' ;
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
InputTextModule,
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...