Tips on how to dynamically adjust toggle switch in Ionic version 4

Attempting to retrieve toggle state from the server and update the view accordingly. Below is the HTML code:

<ion-list *ngIf="this.devices.length > 0 " no-padding >    
      <ion-item *ngFor="let device of this.devices;  let i = index">      
        <ion-label color="light">{{ device.name }} </ion-label>
        <ion-toggle (ionChange)="update_state($event,device.ssid)" (ngModel)="device.ssid" color="secondary"></ion-toggle >
      </ion-item> 
    </ion-list>

While it's clear that an ion-toggle can be bound to an object in the ts file using ngModel, the question remains on how this will work with dynamically generated toggles?

Answer №1

Adjust the ngModel for two-way binding by replacing (ngModel) with [(ngModel)]

  <ion-toggle (ionChange)="update_state($event,device.ssid)" [(ngModel)]="device.ssid" color="secondary"></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

How can Angular send datetime data to Nodejs in the most effective manner?

Working with the primeng calendar component within a template-driven form, I encountered an issue. When passing the date 16/05/2018 11:45 from Angular to Node, it gets converted to 2018-05-16T06:15:33.000Z. I discovered that I could convert it back to IST ...

Utilize properties when selecting options in Storybook

Here is the interface I have specified: interface PropOptions{ type: 'dog' | 'cat' | 'mouse' | 'turtle' | 'rabbit' } export default PropOptions; Although the list of allowed string values is quite exte ...

Having issues with @ts-ignore in Typescript on a let variable that is not reassigned?

JOURNEY TO THE PROBLEM My current task involves destructuring a response obtained from an Apollo useLazyQuery, with the intention to modify one variable. In a non-Typescript environment, achieving this would be straightforward with just two lines of code: ...

navigate to various pages depending on the selected radio button

Is there a way to navigate to different pages based on the selection of radio buttons in my form? For example, I have 3 Ionic radio buttons named: 1. USO 2. OASO 3. TFTSO I want to redirect to a different page when USO is selected, another page for OASO, ...

Saving the compiled Angular dist folder in the artifactory repository

Our team utilizes Artifactory to manage libraries and artifacts. We have configured the npm registry to point to our Artifactory URL for library retrieval. GitLab is integrated into our CI pipeline. Specifically, I have implemented a job that compiles the ...

Utilizing the relativeTo method within a guard across various feature modules

I am facing a challenge with two lazily loaded Feature Modules that have a similar flow consisting of Select, Review, and Confirm steps. I want to create a single Guard for the Review step that can navigate back to Select based on the current Module contex ...

The specified path is not found within the JsonFilter

Something seems off. I'm using Prisma with a MongoDB connection and attempting to search the JSON tree for specific values that match the [key, value] from the loop. However, I haven't made much progress due to an error with the path property. Be ...

Issue found in React Js test - TypeError: source.on does not exist as a function

I'm encountering an issue with my post request using multipart/form-data. Everything runs smoothly, except for the tests which are failing. When running the tests, I encounter an error message: TypeError: source.on is not a function. This is the code ...

Utilizing Angular 8 with a proxy configuration

Being new to using proxies, I have a simple question. I created my Angular application which is being served on localhost:2000 with all the necessary routes set up. Later on, I realized that I need to use a proxy (localhost:3000/api) like this: { "/api" ...

Is there a workaround for using date input type in Safari with Angular?

After doing some research, I discovered that Safari does not support the type="date" attribute. Is there an alternative way to handle dates using jQuery or a datepicker in Angular? Here is my current input: <input [ngModelOptions]="{ standalone: t ...

The header grid will disappear in the p-dialog when the browser is minimized

Check out this informative article on creating a dynamic dialog box using PrimeNG here Take a look at the image below to see how the dialog box appears when opened: https://i.sstatic.net/nUq1d.png One issue I am facing is that the grid header gets hidd ...

Introduce various file categories from both projects

My current project consists of two sub-projects: Web, built using React, and Native, built using RN. I have defined common styles for components and created interfaces for developers to write style codes for both platforms. One interface in particular, but ...

Typescript with AngulaJS is unable to access Angular services within a directive's link function

I'm new to TypeScript and I'm attempting to create an Angular.js directive using a TypeScript class. I want to utilize external Angular services in the directive's link function, which is called when the $watch function receives data. Howeve ...

Having trouble accessing gridApi in Ag-Grid while using React hooks with Typescript?

I have implemented a function component in React with Typescript. This is how my component is structured: const Table = (props: TableProps) => { const [gridApi, setGridApi] = React.useState(() => {}) const gridOptions = { rowData: rowData, ...

Enabling custom file extensions for JavaScript IntelliSense in VS Code: A step-by-step guide

The title of this query reveals my predicament. In our organization, we employ an unconventional file extension for source code written in JavaScript. It appears that switching the file extension to ".js" triggers IntelliSense. My curiosity lies in whethe ...

Testing the Compatibility of Angular JS and Angular 8 in a Hybrid Application

I am currently working on a hybrid application using AngularJS and Angular 8. The new components I create in Angular need to be downgraded for use in AngularJS. Here is a snippet of the module code: @NgModule({ // Declarations and Imports providers ...

Technique in CSS/SASS to repair a div

Seeking a solution for fixing divs with text in CSS. I am aware of the background-attachment: fixed; property which creates a fancy effect. Is there a similar property to "fix" divs with text or how can this be achieved in Typescript? Your insight would be ...

What is the process for switching a button on and off?

I am attempting to add a data to an array when a button is pressed, and then remove it from the array when the button is pressed again (while also changing the button's class). <button *ngFor="#color of colors" [class.selected]="color = ...

Is it possible to swap images by clicking on them?

Let's say I'm working with 3 images. Image A, B and C. A is the main image initially. If I click on image B, it will become the main image and image A will take its place in the old position. The same condition applies when B is the main image a ...

Ensure that test cases in Angular2 include a line that covers conditions for returning values

I'm having trouble implementing test coverage for an online platform, as I'm not sure how to approach it. Within my service method, I have the following code: public getResults() { return this.http(url,body).map(this.mapResponse); } private ...