show hide password fuction many

show-hide-password.ts

<ion-input 
    [type]="getPasswordStatus('password1')"
  >
  <ion-button
    (click)="showHidePassword('password1')"
    fill="clear" 
    slot="end" 
    aria-label=""
  >
    <ion-icon
      [name]="getPasswordIcon('password1')"
      slot="icon-only"
    ></ion-icon>
  </ion-button>
</ion-input>

interface IPasswordStatus {
  name: string;
  type: string;
  icon: string;
}  
passwordStatus:IPasswordStatus[] = [
    {
      name: 'password1',
      type: 'password',
      icon: 'eye-outline',
    },
    {
      name: 'password2',
      type: 'password',
      icon: 'eye-outline',
    },
  ];
  
getPasswordStatus(inputName: string) {
    const status = this.passwordStatus.find((t) => t.name === inputName);
    return status ? status.type : 'password';
  }

  getPasswordIcon(inputName: string) {
    const status = this.passwordStatus.find((t) => t.name === inputName);
    return status ? status.icon : 'eye-outline';
  }

  showHidePassword(inputName: string) {
    const status = this.passwordStatus.find((status) => status.name === inputName);
    if (status) {
      status.type = status.type === 'password' ? 'text' : 'password';
      status.icon = status.icon === 'eye-outline' ? 'eye-off-outline' : 'eye-outline';
    }
  }