<mat-form-field class="password-input">
  <mat-label [translate]="label"></mat-label>

  <input matInput [type]="hide ? 'password' : 'text'" [formControl]="formControlComponent"
         [errorStateMatcher]="matcher">

  <button mat-icon-button matSuffix (click)="hide = !hide" [attr.aria-label]="'Hide password'"
          [attr.aria-pressed]="hide">
    <mat-icon  color="accent">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
  </button>

  <mat-error *ngIf="formControlComponent.hasError('minlength') && !formControlComponent.hasError('required')"
             [translate]="'inputs.password.error.length'"></mat-error>

  <mat-error *ngIf="formControlComponent.hasError('required')"
             [innerHTML]="'inputs.password.error.required' | translate"></mat-error>

  <mat-error *ngIf="formControlComponent.hasError('notSame')" [translate]="'inputs.password.error.match'"></mat-error>

</mat-form-field>
