Toggling multiple ions simultaneously does not function independently

I encountered a problem while working on an ionic app. I needed to have individual control over toggle switches, but my current code toggles all switches at once whenever one switch is tapped. Is there a way to fix this and manage each toggle switch separately?

app.ts file

toggleSwitch(switchName) {
    console.log(switchName + ' toggled');
    console.log('Toggle value=' + this.toggleValue);
  }

app.html file

<ion-row>
        <ion-col>
          <ion-list>
            <ion-item *ngFor="let switch of switches">
              <ion-label>Switch Name: {{switch.Switch.name}}</ion-label>
              <ion-toggle [(ngModel)]="toggleValue" (ionChange)="toggleSwitch(switch.Switch.name)"></ion-toggle>
            </ion-item>
          </ion-list>
        </ion-col>
      </ion-row>

https://i.stack.imgur.com/MbdNL.gif

Answer №1

Each ion-toggle within the loop is connected to the same variable: toggleValue. With two-way binding, modifying one will affect them all.

Decide how you want to store the data - either in the original switch array or in a separate one and assign it to ngModel.

<ion-toggle [(ngModel)]="switch.value" (ionChange)="toggleSwitch(switch.Switch.name)"></ion-toggle>

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

Exploring the Angular TypeScript Method for Rendering Nested Objects in an Array

Within this array, I have a collection of objects that contain properties for model and color. My goal is to present these objects in a table format, with individual access to the color values. grp = [ {model: "CF650-3C", color: {Orange: 3, Black ...

What is the best way to pass updates from input model class in a child component to its parent in Angular 13?

What is the best way to propagate changes in the input model class from a child component to its parent in Angular 13? Child Component export class ChildComponent implements OnInit { @Input() mdlInData: any; @Output() mdlOutData = new EventEmitter< ...

Automate the process of triggering the "Organize Imports" command on a VSCode / Typescript project through code

Is there a way to automatically run VSCode's 'Organize Imports' quickfix on every file in a project, similar to how tslint can be run programatically over the entire project? tslint --project tsconfig.json --config tslint.json --fix I want ...

Encountered an issue with Webpack 5 - A ReferenceError was thrown: require is not recognized

I encountered an error while attempting to access the main page of my app in the browser: Uncaught ReferenceError: require is not defined at Object.events (main.bundle.js:90508:1) at __webpack_require__ (main.bundle.js:91217:33) at fn (main.bundle.js:91451 ...

Utilizing Angular 7, Ngrx, and Rxjs 6 to efficiently share state data among lazily loaded modules

Currently, I am working with Angular 7 alongside Ngrx and Rxjs 6. In my project, I have two lazy loaded modules named A and B, each with its own selectors and reducers. The challenge I am facing is accessing the data stored in module B's state from m ...

Adjust property value based on changes in a related property

Currently, I am developing a TypeScript-powered Angular (5) application and I have encountered a puzzling question that is proving elusive to solve. Let me illustrate with the following example: ... export class SomeComponent implements onInit { ... ...

Utilizing the String Enum for mapping an interface with an index

Using Typescript, I aim to make use of my string enumeration: export const enum MutationKeys { registerUser = 'registration/REGISTER', registerUserCompleted = 'registration/REGISTER_COMPLETED' } This allows the string values t ...

Obtain user information post-payment with Angular's latest Paypal Checkout 2.0 feature

My app is all set up to sell various items, with PayPal handling the payment process. In order to generate invoices, I need to access user details such as their name and address, which are stored by PayPal for each user. How can I retrieve this information ...

angular pipe and tap methods fail to execute the designated function

I am encountering a problem when calling a function in my login service. I have tried using a pipe and tap. Interestingly, when I use res => console.log(res), it outputs the desired result. However, when I attempt to call a function, it seems that the ...

Is it recommended to store SCSS and TypeScript files in the wwwroot folder in ASP.NET Core and Angular 2 development?

I'm struggling to understand where I should place my ts and scss files. The wwwroot folder is specifically for static files, but the ts and scss files are compiled. Should I recreate a similar folder structure both in wwwroot and outside of it, and th ...

Troubleshooting AngularJS2 and npm in WebStorm and Chrome for Windows users

Having completed the official Hero tutorial for AngularJs2 using Visual Studio Code, I decided to switch my coding and debugging setup to WebStorm+Chrome on Windows 10. To achieve this transition, I took the following steps: Installed Chrome JetBrains ...

Steps to trigger a modal using an effect and automatically close it upon receiving a specific dispatched action

Is there a better way to handle the closing of a dialog after a specific action is dispatched? Currently, I have a CalendarEventDeleteDialog with "yes" and "no" options. If the user selects "yes," a CalendarEventDeleteAction is dispatched followed by a Cal ...

What is the best way to incorporate Typescript React Components across various projects?

I'm venturing into developing an npm package that involves several react components implemented with typescript. As a newcomer to react and npm, I apologize if my query seems basic. Despite researching online, there isn't much information on this ...

Obtain a hidden item using *ngIf in Angular for testing purposes

Snippet of HTML Code: <div *ngIf="state"> <p>some text<p> <button (click)="increment()" class="myButton">Increment</button> </div> My Component Structure: @Component( ...

The process of deploying production-ready code using webpack and angular2

Currently, my Angular 2 code utilizes both webpack and grunt. During development, I rely on webpack-dev-server as a grunt task. When it comes to preparing the code for production deployment, I handle all minification tasks through Grunt which results in t ...

Deactivate user session in LoopBack 4 API

Can anyone provide a clear example of an API endpoint for logging out that allows for deleting the token stored during login instead of relying on the web browser? It seems there is no documentation available on how LoopBack generates a default user when ...

Managing time in an Angular application using Typescript

I am facing an issue with formatting the time obtained from an API in my FormArray. The time is received in the format: 14.21.00 My goal is to convert this time to the following format: 2:21 PM I have attempted to format it using Angular's DatePip ...

Authenticate the user using IdentityServer

I'm looking to set up a system where the user is automatically redirected to the login page after an hour, but I'm having trouble configuring this on my server. I've added both AccessTokenLifetime and AbsoluteRefreshTokenLifetime on my ID se ...

Typescript error encountered in customized PipeLine class

I am currently developing a web scraping application using Puppeteer. In this project, I aim to create a PipeLine class that will take the current instance of the page and expose an add method. This add method should accept an array of functions with the t ...

Run a script in a newly opened tab using the chrome.tabs.create() method

Struggling with executing a script using chrome.tabs.executeScript() in the tab created with chrome.tabs.create()? Despite searching for solutions, nothing seems to be working as expected. Check out my current code below: runContentScript(){ c ...