Angular Material Password Field With Visibility Toggle

Photo by Aaron Jean on Unsplash

Scenario

Approach

<form [formGroup]="signin"><mat-form-field><input matInput placeholder="Password" [type]="hide ? 'password' : 'text'" formControlName="password" required><mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon><mat-hint *ngIf="!passwordInput.value">Enter your password</mat-hint></mat-form-field></form>

Demo

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ole Ersoy

Ole Ersoy

Founder of Firefly Semantics Corporation