Angular PrimeNG Form Password Templates Component

Angular PrimeNG is an open-source front-end UI library that has many native Angular UI components which help developers to build a fast and scalable web solution. This article will discuss the Angular PrimeNG Form Password Templates 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 templates for the Password component which are listed below.

Angular PrimeNG Form Password Templates:

• header: This template is used to specify the header of the password component’s panel.
• content: This template is used to specify the content of the password component’s panel.
• footer: This template is used to specify the footer of the password component’s panel.

Syntax:

<p-password 
    [(ngModel)]="...">
    <ng-template pTemplate="header">
        ...
    </ng-template>
    <ng-template pTemplate="content">
        ...
    </ng-template>
    <ng-template pTemplate="footer">
        ...
    </ng-template>
</p-password>

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: In this example, we used the content template of the password component to override the default strength meter for the password and add custom text to it.

• app.component.html

HTML

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

<h4>Default Password Component</h4>
<p-password [(ngModel)]="password1">
</p-password>

<h4>Custom Content Password Component</h4>
<p-password [(ngModel)]="password2">
    <ng-template pTemplate="content">
        <p>
            This is the custom
            content of the password
            component added using
            the <i><b>content</b></i>
            template. This will replace
            the strength meter.
        </p>
    </ng-template>
</p-password>

• app.component.ts

Javascript

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

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

export class AppComponent {
    password1?: string;
    password2?: 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 header and footer templates of the password component to add additional content to the overlay panel along with the strength meter.

• app.component.html

HTML

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

<h4>Default Password Component</h4>
<p-password [(ngModel)]="password1">
</p-password>

<h4>
      Password Component
      with Header and Footer
</h4>
<p-password [(ngModel)]="password2">
    <ng-template pTemplate="header">
        <h4>Password Header</h4>
        <p-divider></p-divider>
    </ng-template>
    <ng-template pTemplate="footer">
        <p-divider></p-divider>
        <h4>Password Footer</h4>
    </ng-template>
</p-password>

• app.component.ts

Javascript

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

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

export class AppComponent {
    password1?: string;
    password2?: 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