a Input using Angular Material + Fontawsome with the visible not visible functionality clicking on the eye icon at the right

Material-Angular-Password- visible_invisible.md

View/Hide Password Input

Remember to change the passH variable to a diffrent one in each input you place in the dom within the same scope. Using the name/id + and H ( as in Hide xD ) is usally a good idea to avoid repeating.

<mat-form-field>
    <input [type]="!passH ? 'password' : 'text'" matInput placeholder="A new Password" [(ngModel)]="pass" name="pass">
    <div matSuffix (click)="passH = !passH"><i class="fas fa-{{!passH ? 'eye-slash' : 'eye'}} "></i></div>
</mat-form-field>