Angular PrimeNG Form Password Styling Component

Angular PrimeNG is an open-source front-end UI framework developed by PrimeTek for developing efficient and scalable angular applications. Using PrimeNG in their projects helps developers to cut down the development time and focus on other important areas of the application. In this article, we will be seeing the Angular PrimeNG Form Password Styling Component.

The Password Component is used to take the input of sensitive information like passwords, credit/debit card CVV, etc from the user. When it is in focus a password strength indicator is shown to the user. There are 3 structural styling classes of the password component which can be used to style the component.

Angular PrimeNG Form Password Styling Classes:

• p-password-panel: It is the container of the password panel.
• p-password-meter: It is the meter element of password strength.
• p-password-info: It is the text element of password strength.

Angular PrimeNG Form Password Styling Properties:

• placeholder: This is a string to use as a placeholder for the password input.
• feedback: This specifies whether to show the strength indicator or not.
• toggleMask: If this is set to true, an icon will be shown to show the entered password as plain text.
• weakLabel: This is the label to show when the entered password is weak.
• mediumLabel: This is the label to show when the entered password is medium.
• strongLabel: This is the label to show when the entered password is strong.

Syntax:

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

// In app.component.css
:host ::ng-deep .Password-Styling-Class{
    // CSS
}

Creating Angular Application and Installing the Module:

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

ng new appname

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

cd appname

Step 3: Finally, Install PrimeNG in your given directory.

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

Project Structure: The project Structure will look like this after following the above steps:

Project Structure

Example 1: This example shows the use of the “p-password-panel” class to change the styling of the password component panel.

• app.component.html

HTML

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

<p-password [(ngModel)]="password"
            placeholder="Enter the Password">
</p-password>

• app.component.css

CSS

:host ::ng-deep .p-password-panel {
    color: green;
    border: 2px solid green;
    background: #ffcccc;
}

• app.component.ts

Javascript

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

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

export class AppComponent {
    password?: 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 { PasswordModule } from 'primeng/password';

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

Output:

Example 2: In this example, we used the above-mentioned styling class to change the height and the border radius of the password strength meter and change the color and font weight of the text.

• app.component.html

HTML

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

<p>Default Password Component</p>
<p-password [(ngModel)]="password"
            placeholder="Enter the Password">
</p-password>

<p class="mt-6">
      Custom Styled Password Component
</p>
<p-password class="myPass"
              [(ngModel)]="myPassword"
              placeholder="Enter the Password">
</p-password>

• app.component.css

CSS

:host ::ng-deep .myPass .p-password-meter {
    border: 1px solid red;
    height: 15px;
    border-radius: 10px;
}

:host ::ng-deep .myPass .p-password-panel {
    color: green;
    font-weight: bold;
    font-size: 20px;
}

• app.component.ts

Javascript

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

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

export class AppComponent {
    password?: string;
    myPassword?: 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 { PasswordModule } from 'primeng/password';

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

Output:

Reference: http://primefaces.org/primeng/password