Angular PrimeNG Form InputMask Styling Component

Angular PrimeNG is a collection of Angular UI components. It is an open-source library developed by PrimeTek. It has many ready-to-use components that make it one of the top choices of angular developers when it comes to choosing a UI library. In this article, we will see the Angular PrimeNG Form InputMask Styling Component.

The InputMask Component provides the user with a specific format that he has to abide by when entering the data. The data can be anything such as date, phone number, currency, etc. There is only one structural style class of the InputMask component that is the same as that of the InputText component.

Angular PrimeNG Form InputMask Styling Classes:

• p-inputtext: This is the input element of the InputMask component.

There are a few Form InputMask stylings that are described below:

• mask: This property is used to define the type of value the user can enter. It can contain 
  • a – Alpha character (default: A-Z,a-z)
  • 9 – Numeric character (0-9)
  • * – Alphanumeric characters (A-Z,a-z,0-9)
• placeholder: This property is used to set a placeholder for the InpiutMask component.

Syntax:

// app.component.html
<p-inputMask 
    [(ngModel)]="..."
    placeholder="..." 
    mask="...">
</p-inputMask>

// app.component.css
:host ::ng-deep .Structural-Style-Class {
    // CSS
}

Creating Angular application and Installing the Modules:

Step 1: Create an Angular application using the following command.

ng new myapp

Step 2: After creating your project folder i.e myapp, move to it using the following command.

cd myapp

Step 3: Install PrimeNG in your given directory.

npm install primeng --save
npm install primeicons --save

Project Structure: After completing the above steps, the structure will look like the following:

Project Structure

Example 1: In this example, we used the “p-inputtext” styling class to change the border color and the text color of the input mask component.

• app.component.html

HTML

<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG InputMask Styling Component</h3>

<h4>
      InputMask Styling -
      Border and Color of
    the InputMask
</h4>

<p-inputMask [(ngModel)]="maskValue"
             placeholder="99999-99999"
             mask="99999-99999">
</p-inputMask>

• app.component.css

CSS

:host ::ng-deep .p-inputtext,
:host ::ng-deep .p-inputtext:focus:enabled,
:host ::ng-deep .p-inputtext:hover {
    color: green;
    border: 2px solid green;
    box-shadow: none;
}

:host ::ng-deep .p-inputtext:focus:enabled {
    box-shadow: 0 0 0 0.2rem #c9febf;
}

• app.component.ts

Javascript

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent {
    maskValue: string = "";
}

• app.module.ts

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { InputMaskModule } from 'primeng/inputmask';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        InputMaskModule,
        FormsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

Output:

Example 2: In this example, we removed the border of the InputMask when it is not in focus, it gets the border back when it’s in focus. Also, we changed the font size and bolded the text inside it.

• app.component.html

HTML

<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG InputMask Styling Component</h3>

<h4>
    InputMask Styling -
    Border and Font Size
    of the InputMask
</h4>

<h5>Normal Inputmask</h5>
<p-inputMask [(ngModel)]="maskValue1"
             placeholder="99999-99999"
             mask="99999-99999">
</p-inputMask>

<h5>Custom Inputmask</h5>
<p-inputMask class="custom"
             [(ngModel)]="maskValue2"
             placeholder="99999-99999"
             mask="99999-99999">
</p-inputMask>

• app.component.css

CSS

:host ::ng-deep .custom .p-inputtext {
    border: none;
    font-size: 24px;
    font-weight: bold;
    background-color: #e2e2e2;
}

:host ::ng-deep .custom .p-inputtext:focus:enabled {
    box-shadow: none;
    border: 2px solid red;
}

• app.component.ts

Javascript

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent {
    maskValue1: string = "";
    maskValue2: string = "";
}

• app.module.ts

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { InputMaskModule } from 'primeng/inputmask';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        InputMaskModule,
        FormsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

Output:

Reference: https://primefaces.org/primeng/inputmask