Angular PrimeNG Form Inputtext Styling 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 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.
- app.component.html
HTML
< div > < h1 style = "color:green;" >w3wiki</ h1 > < h3 >A computer science portal for Beginner</ h3 > < h4 >Angular PrimeNG Form InputText Styling Component </ h4 > < input type = "text" pInputText [(ngModel)]="textValue" /> </ div > |
- app.component.css
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 ; } |
- app.component.ts
Javascript
import { Component } from '@angular/core' ; @Component({ selector: 'app-root' , templateUrl: './app.component.html' , styleUrls: [ './app.component.css' ] }) export class AppComponent { textValue: String = "" ; } |
- 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' ; @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.
- app.component.html
HTML
< div > < h1 style = "color:green;" >w3wiki</ h1 > < h3 >A computer science portal for Beginner</ 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 > |
- app.component.css
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 ; } |
- app.component.ts
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 = "" ; } |
- 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' ; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule, InputTextModule, FormsModule ], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } |
Output:
Reference: http://primefaces.org/primeng/inputtext