Open In App

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:

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



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.




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




: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;
}




import { Component } from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
  
export class AppComponent {
    maskValue: string = "";
}




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.




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




: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;
}




import { Component } from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
  
export class AppComponent {
    maskValue1: string = "";
    maskValue2: string = "";
}




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


Article Tags :