Добавьте этот компонент отображения / скрытия пароля в свое приложение Ionic Angular за 3 простых шага.

Шаг 1 - Создайте компонент Angular

  • Создайте компонент Angular с ContentChild IonInput.
  • Добавьте метод переключения, который будет срабатывать при нажатии значка глаза.
  • Этот метод будет переключаться между отображением текста пароля и точек.
  • Определите логическую переменную showPassword.
import { Component, ContentChild } from '@angular/core';
import { IonInput } from '@ionic/angular';
@Component({
  selector: 'app-show-hide-password',
  templateUrl: './show-hide-password.component.html',
  styleUrls: ['./show-hide-password.component.scss']
})
export class ShowHidePasswordComponent {
  showPassword = false;
@ContentChild(IonInput) input: IonInput;
constructor() {}
toggleShow() {
    this.showPassword = !this.showPassword;
    this.input.type = this.showPassword ? 'text' : 'password';
  }
}

Шаг 2. Добавьте html-разметку для компонента.

  • Создайте простую привязку с нашим методом переключения, привязанным к событию щелчка.
  • Измените значок между открытыми и закрытыми глазами в зависимости от переменной showPassword.
<ng-content></ng-content>
<a class="type-toggle" (click)="toggleShow()">
   <ion-icon class="show-option" [hidden]="showPassword" name="eye-off-outline"></ion-icon>
   <ion-icon class="hide-option" [hidden]="!showPassword" name="eye-outline"></ion-icon>
</a>

Это мой show-hide-password.component.scss, чтобы добавить несколько стилей.

:host {
  display: flex;
  width: 100%;
  align-items: center;
.type-toggle {
    padding-inline-start: 0.5rem;
.show-option,
    .hide-option {
      font-size: 1.2rem;
      display: block;
// In case you want to use text instead of icons
      &:not(ion-icon) {
        text-transform: uppercase;
        font-size: 1rem;
      }
    }
  }
}

Шаг 3. Используйте компонент "Показать / скрыть пароль"

Просто используйте компонент с ‹ion-input› в качестве дочернего содержимого.

<ion-item>
  <app-show-hide-password>
      <ion-input type="password" placeholder="Password" formControlName="password"></ion-input>
  </app-show-hide-password>
</ion-item>

Это все.

Это было легко, правда?

Давай, добавь его в свое приложение Ionic Framework и покажи мне результат.

Узнайте больше об Ionic Framework!

Нужна помощь с укладкой? Дай мне знать в комментариях.