Assigning the identical function to multiple buttons in Ionic version 2

I designed an eye icon button for toggling password visibility.

However, I have a specific page that needs to serve as the "password recovery" page.

In this particular page, there are 3 input fields, each with the same toggle button attached to them...

When I click on one button, all three fields become toggled.

How can I individually bind each input field to the same function?

Here is the code snippet:

HTML

<ion-item>
  <ion-input placeholder="Old Password" [type]="isPasswordVisible ? 'password' : 'text'">
  </ion-input>
  <button ion-button icon-only item-right clear color="light" (click)="togglePasswordVisibility()"><ion-icon [name]="isPasswordVisible ? 'eye' : 'eye-off'"></ion-icon>
  </button>
</ion-item>

TS

isPasswordVisible: boolean = true;
togglePasswordVisibility(): void {
this.isPasswordVisible = !this.isPasswordVisible;
}

Thank you for your help!

angularjstypescriptionic2angular2-template

Answer №1

Implementing three boolean variables within your function can streamline the process.

isPasswordShown : boolean = true;
isPasswordShown2 : boolean = true;
isPasswordShown3 : boolean = true;

togglePasswordVisibility():void{
    this.isPasswordShown = !this.isPasswordShown;
    this.isPasswordShown2 = !this.isPasswordShown;
    this.isPasswordShown3 = !this.isPasswordShown;
}

Answer №2

Here is an example of a code snippet:

<ion-item>
   <ion-input placeholder="Enter your old password" [type]="isPasswordVisible1 ? 'password' : 
       'text'">
   </ion-input>
   <button ion-button icon-only item-right clear color="light" 
      (click)="togglePasswordVisibility(1)">
      <ion-icon [name]="isPasswordVisible1 ? 'eye' : 'eye-off'"></ion-icon>
  </button>
</ion-item>

<ion-item>
    <ion-input placeholder="Enter your old password" [type]="isPasswordVisible2 ? 'password' 
      :  'text'">
   </ion-input>
   <button ion-button icon-only item-right clear color="light" 
      (click)="togglePasswordVisibility(2)">
  <ion-icon [name]="isPasswordVisible2 ? 'eye' : 'eye-off'"></ion-icon>
 </button>
</ion-item>

<ion-item>
   <ion-input placeholder="Enter your old password" [type]="isPasswordVisible3 ? 'password' : 
      'text'">
</ion-input>
   <button ion-button icon-only item-right clear color="light" 
     (click)="togglePasswordVisibility(3)">
   <ion-icon [name]="isPasswordVisible3 ? 'eye' : 'eye-off'"></ion-icon>
   </button>
</ion-item>



isPasswordVisible1: boolean = true;
isPasswordVisible2: boolean = true;
isPasswordVisible3: boolean = true;

togglePasswordVisibility(index): void {
   switch (index) 
   {
    case 1: 
      this.isPasswordVisible1 = !this.isPasswordVisible1;
      break; 
    case 2: 
      this.isPasswordVisible2 = !this.isPasswordVisible2;
      break; 
    case 3: 
      this.isPasswordVisible3 = !this.isPasswordVisible3;
      break;                 
    }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Accessing AngularJS variable scope outside of a function

Utilizing a socket, I am fetching data into an angularJS controller. $rootScope.list1= ''; socket.emit('ticker', symbol); socket.on('quote', function(data) { $rootScope.list1 = angular.fromJson(data.substring(3)); //I can ...

javascriptangularjssocket.io

I'm looking for resources on integrating jqPlot with Angularjs. Where should I start my search

Having trouble incorporating jqPlot into my Angular application. Struggling to locate a complete documentation outlining all the available options and chart types... I've searched through: UI.Chart ui-chart Your assistance would be greatly appreci ...

angularjsjqplot

What is preventing Protractor from detecting Angular on a site that has been automatically initialized with Angular?

Whenever I try to utilize browser.get() in my code, I encounter the following error: Error: Angular could not be found on the page http://localhost:5000/#/login debug=timing&saveLogs=true&displayAll=true : angular never provided resumeBootstrap A ...

javascriptangularjsprotractor

Accessing the id within both objects is proving to be a challenge for me

I'm facing an issue with accessing and posting values of the id within Position and Department in Angular. It seems like the id is not being accessed correctly. addEmployee.model.ts export class AddEmployee { Position: { id: string; }; De ...

javascripthtmlangulartypescript

Merge the values of checkboxes into a single variable

How can I gather all the checkbox values from my list and combine them into a single variable? This is the structure of my HTML: <div class="card" *ngFor="let event of testcases" > <input class="form-check-input" ...

angulartypescript

I find that ChangeDetectionStrategy.OnPush does not function as anticipated

Exploring the performance boost of ChangeDetectionStrategy.OnPush in Angular 2 (detailed here) has been my recent focus. However, I've encountered an interesting scenario. In my code, I have the parent component AppComponent: @Component({ selector ...

angulartypescript

Tips for effectively utilizing tags in AngularJS search functionality

I attempted to implement a search box that utilizes tags, shown in the image below. Despite trying to use bootstrap tags, it did not work as intended. Here is a visual representation of how the search should be displayed: https://i.sstatic.net/COqai.png ...

javascriptangularjsangularjs-directiveangular-ui-bootstrapangularjs-3rd-party

What is the importance of using getters for functions involving Moment.js in vueJS and typescript?

weekOfMonth() calculates the current month and week within that month. <template> <h3>{{ weekOfMonth }}</h3> </template> <script lang="ts"> export default class HomeView extends Vue { const moment = require(& ...

typescriptvue.jsmomentjs

Filtering nested arrays in Angular by cross-referencing with a navigation menu

In the legacy application I'm working on, we have a navigation menu along with a list of user roles. Due to its legacy nature, we have accumulated a significant number of user roles over time. The main goal is to dynamically display the navigation me ...

javascriptarraysangulartypescriptangular12

Required Ionic form field alert

Currently, I am developing a new app using ionic 3 and I am facing an issue with making inputs mandatory in my ionic-alert controller. Despite going through the ionic-component documentation and api documentation, I couldn't find a solution on how to ...

angulartypescriptionic-frameworkionic3

Passing a variable from a child component to a parent component in Angular 2 using EventEmitter and a

I am experiencing a challenge with the Event Emitter in my child component. My goal is to pass a variable with EventEmitter to the parent component, but I would like to include a timeout function. Currently, the code looks like this: CHILD: export class ...

javascriptangulartypescript

What sets apart Angular's $http.post from jQuery's $.post?

What is the difference between Angular's $http.post and jQuery's $.post? $http.post() vs $.post() Does $http.post() internally use $.ajax from jQuery or does it create its own XMLHttpRequest? I am currently experiencing an issue with Angular&a ...

jqueryangularjs

Developing a unique custom directive for ng-click that executes several controller functions simultaneously

Here is the code snippet I'm working with: <div>... <div class="glyphicon glyphicon-filter ng-click="vm.add()" tabindex="1"> <a href='' tabindex="2"><img id="touch" ng-click="vm.multiply(xyz)" src="/ui/as ...

angularjsangularjs-directiveangularjs-ng-click

Secure TypeScript Omit Utility for Ensuring Type Safety

I need to create a custom implementation of Lodash's _.omit function using plain TypeScript. The goal is for the omit function to return an object with specific properties removed, which are specified as parameters after the initial object parameter. ...

javascripttypescriptunderscore.jslodashecmascript-2016

Flick your finger to browse left and right

Is there a way to scroll through cards without using layout-wrap by swiping? Can this be achieved with ng-touch? I want all the cards to have the same height, so I added style="height: 90%" to md-card. Is this the correct method? https://i.sstatic.net/Se ...

angularjsangular-material

The vertical scrolling feature seems to be disabled for ng-repeat within the Angular view

I have a list of customers coming from the backend that I need to populate into ng-repeat. However, even though there are more customers, the vertical scroll is not visible. Why is that? <link rel="stylesheet" href="hike.css"> <div ng-show=' ...

javascriptcssangularjs

The switch/case function I implemented is functioning correctly, however, an error is being displayed in the console stating "Cannot read property 'name' of null"

Check out the live codepen demo here After selecting "elephant" from the third dropdown, the console.log(brand.name) displays "elephant" as expected and executes the rest of the switch statement successfully. However, there seems to be a console error oc ...

javascriptangularjs

Accessing information from req.files in a TypeScript environment

I am currently using multer for uploading images. How can I retrieve a specific file from req.files? Trying to access it by index or fieldname has been unsuccessful. Even when I log it, I see that it's a normal array, so I suspect the issue may be rel ...

javascriptnode.jstypescriptexpressmulter

Exploring the most effective strategies for creating a brand-new type in TypeScript?

In the execution environment I'm working with, there are several global constants that represent different directions: TOP = 1 TOP_RIGHT = 2 RIGHT = 3 BOTTOM_RIGHT = 4 BOTTOM = 5 BOTTOM_LEFT = 6 LEFT = 7 TOP_LEFT = 8 These constants are not just ran ...

typescripttypesglobal-variables

AngularJS: Clearing form on click event

Is there a simple method recommended for resetting or reloading an HTML form with a click event in AngularJS? ...

angularjsforms