Angular PrimeNG Form Password Events Component

Angular PrimeNG is a collection of UI components made for Angular applications. It makes it easy for developers to build beautiful and efficient web interfaces without investing much time. In this article, we will be discussing the Angular PrimeNG Form Password Events Component.

The Password Component is used to take input of the sensitive information from the user. It changes all the characters entered by the user into bullets. The Password component built into PrimeNG also shows a password strength indicator when the user enters the password.

Angular PrimeNG Form Password Events:

• onFocus: This event accepts a callback which is invoked when the Password input gets the focus.
• onBlur: This event accepts a callback which is invoked when the Password input loses focus.
• onClear: This event accepts a callback which is invoked when the value of the Password input is cleared.

Angular PrimeNG Form Password Events Properties:

• showClear: This is a boolean property used to show a clear icon for clearing out the password input.

Syntax:

<p-password 
    (event-name)="callback()"
    [(ngModel)]="pass1">
</p-password>

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 onFocus and onBlur events of the Password component to show a message whenever the input focus state changes.

• app.component.html:

HTML

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

<p-password
    (onFocus)="passOnFocus()"
    (onBlur)="passOnBlur()"
    [(ngModel)]="pass1">
</p-password>

<p-toast></p-toast>

• app.component.ts:

Javascript

import { Component } from '@angular/core';
import { MessageService } from 'primeng/api';

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

export class AppComponent {
    constructor(private msg: MessageService) { }
    pass1: string = "";

    passOnFocus() {
        this.msg.add({
            severity: "success",
            summary: "Password In Focus",
            detail: "onFocus Event Triggered"
        })
    }

    passOnBlur() {
        this.msg.add({
            severity: "error",
            summary: "Password Out of Focus",
            detail: "onBlur Event Triggered"
        })
    }
}

• 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';
import { ToastModule } from 'primeng/toast';

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

Output:

Example 2: In this example, we used the onClear Event of the Password component to show a message to the user whenever the password input is cleared using the clear icon.

• app.component.html:

HTML

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

<p-password
    (onClear)="passOnClear()"
    [showClear]="true"
    [(ngModel)]="pass1">
</p-password>

<p-toast></p-toast>

• app.component.ts:

Javascript

import { Component } from '@angular/core';
import { MessageService } from 'primeng/api';

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

export class AppComponent {
    constructor(private msg: MessageService) { }
    pass1: string = "";

    passOnClear() {
        this.msg.add({
            severity: "info",
            summary: "Password Cleared",
            detail: "onClear Event Triggered"
        })
    }
}

• 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';
import { ToastModule } from 'primeng/toast';

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

Output:

Reference: https://www.primefaces.org/primeng/password