[Angular Material] 輸入密碼可以切換檢視和不檢視

HTML

  <mat-form-field>

            <input

              matInput

              placeholder="密碼"

              [type]="isPasswordHide ? 'password' : 'text'"

              autocomplete="on"

              formControlName="accountPassword"

            />

            <button

              mat-icon-button

              matSuffix

              (click)="isPasswordHide = !isPasswordHide"

              [attr.aria-label]="'Hide password'"

              [attr.aria-pressed]="isPasswordHide"

            >

              <mat-icon>{{

                isPasswordHide ? 'visibility_off' : 'visibility'

              }}</mat-icon>

            </button>

          </mat-form-field>

TS

  // 設置輸入密碼時可否看到的值

  isPasswordHide = true;