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;">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>

• 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;">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>

• 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