Hide and Show Password with Eye-Icon in Angular Material

By Arvind Rai, April 23, 2024
On this page, I will create password input element to hide and show password with eye-icon in Angular Material application.

1. Eye-Icon

To create eye-icon, use keyword visibility and visibility_off.
When password is visible, use visibility icon.
<mat-icon>visibility</mat-icon> 
When password is not visible, use visibility_off icon.
<mat-icon>visibility_off</mat-icon> 
On the click of icon, we can change icon from visibility to visibility_off and vice-versa.
TS code:
pwdHide = true; 
HTML code:
 
<mat-icon>{{pwdHide ? 'visibility_off' : 'visibility'}}</mat-icon> 

2. Input Text

For password, input type is password and text has no visibility. To show password, we need to change input type as text. We need to change input type dynamically from password to text and vice-versa.
TS code:
pwdHide = true; 
HTML code:
 
<input matInput [type]="pwdHide ? 'password' : 'text'"> 

3. Using matPrefix and matSuffix

Within <mat-form-field>, we can include icon button before or after input tag with the help of matPrefix and matSuffix.
a. Using matPrefix :
Adding matPrefix directive to an element, will make that element as prefix in that <mat-form-field>.
Find the code to use matPrefix with mat-icon-button.
<mat-form-field>
  <button mat-icon-button matPrefix (click)="pwdHide = !pwdHide">
    <mat-icon >{{pwdHide ? 'visibility_off' : 'visibility'}}</mat-icon>
  </button>
  ------
</mat-form-field> 
Icon button will be as prefix in the above <mat-form-field>.
b. Using matSuffix :
Adding matSuffix directive to an element, will make that element as suffix in that <mat-form-field>.
Find the code snippet.
<mat-form-field>
  <button mat-icon-button matSuffix (click)="pwdHide = !pwdHide">
    ------
  </button>
  ------
</mat-form-field> 

4. Example

Find the complete example to hide and show password with eye-icon in our Angular Material application.
user.component.html
<h3>Eye-icon as Suffix</h3>

<mat-form-field>
  <mat-label>Enter password</mat-label>
  <button mat-icon-button matSuffix (click)="visibilityToggle1()">
    <mat-icon>{{getVisibility1()}}</mat-icon>
  </button>
  <input matInput [type]="getIputType1()">
</mat-form-field>

<h3>Eye-icon as Prefix</h3>

<mat-form-field>
  <mat-label>Enter password</mat-label>
  <button mat-icon-button matPrefix (click)="visibilityToggle2()">
    <mat-icon>{{getVisibility2()}}</mat-icon>
  </button>
  <input matInput [type]="getIputType2()">
</mat-form-field> 
user.component.ts
import { Component } from '@angular/core';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';

@Component({
    selector: 'app-user',
    standalone: true,
    imports: [MatFormFieldModule, MatInputModule, MatButtonModule, MatIconModule],
    templateUrl: './user.component.html'
})
export class UserComponent {
    pwdHide1 = true;
    pwdHide2 = true;

    visibilityToggle1() {
        this.pwdHide1 = !this.pwdHide1;
    }
    getIputType1() {
        return this.pwdHide1 ? 'password' : 'text';
    }
    getVisibility1() {
        return this.pwdHide1 ? 'visibility_off' : 'visibility';
    }
    visibilityToggle2() {
        this.pwdHide2 = !this.pwdHide2;
    }
    getIputType2() {
        return this.pwdHide2 ? 'password' : 'text';
    }
    getVisibility2() {
        return this.pwdHide2 ? 'visibility_off' : 'visibility';
    }
} 
Find the print-screen of the output.
Hide and Show Password with Eye-Icon in Angular Material

5. Reference

POSTED BY
ARVIND RAI
ARVIND RAI
LEARN MORE












©2024 concretepage.com | Privacy Policy | Contact Us