Capture and store the current ionic toggle status in real-time to send to the database

I have a list of names from the database that I need to display. Each name should have a toggle button associated with it, and when toggled, the value should be posted back to the database. How can I achieve this functionality in an Ionic application while reading the toggle values dynamically based on their respective IDs?

stud.html


<ion-item *ngFor="let student of getStudentList">
    <ion-label>{{student.Student_FirstName}}</ion-label>
    <ion-toggle [(ngModel)]="student.isChecked" (ionChange)="changeToggle(student)"></ion-toggle>
</ion-item>

stud.ts


changeToggle(selectedStudent) {
    console.log(selectedStudent.Student_FirstName + " is checked");
}

Answer ā„–1

If you want to pass the current item easily to the ionChange function, you can use the following code:

<ion-toggle 
  [(ngModel)]="list.Student_FirstName" 
  (ionChange)="changeToggle(list)">
</ion-toggle>

Component

changeToggle(list){
    console.log(list.Id)
}

Answer ā„–2

To make a request in an Angular way, you can utilize the $http service. In your scenario, it's important to specify the method as 'POST' and direct it to your Web-Service API (url) responsible for interacting with the database. Because it is a POST method, remember to include 'data' if your Web-Service requires variable(s) from this request.

Within your changeToggle() function, ensure that you handle the toggled state appropriately - performing actions on your database when toggled and different ones or none at all when untoggled. This should align with your specific requirements.

UPDATE

Consider implementing the following:

<ion-item *ngFor="let list of getStudentList">
                <ion-label>{{list.Student_FirstName}}</ion-label>
                <ion-toggle [(ngModel)]="list.Student_FirstName" (ionChange)="changeToggle(list)"></ion-toggle>
            </ion-item>

In your changeToggle() function, accept 1 input parameter - the list.

changeToggle(list){
    console.log(list)
}

This enables you to view the list object containing its ID.

I trust this clarifies things for you.

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

Display labels for each tick on the Kendo slider in AngularJS

When using the Kendo UI Core Slider, I noticed that the default label for ticks only appears every 5. In my sliders, the max value is dynamic and can sometimes be as low as 3 or 4. This results in the user only seeing a 0 (as the min) and a few ticks on t ...

Is it feasible to update just one key within an exported type using setState in TypeScript?

Recently, I decided to dive into Typescript within my React App and encountered an error that has left me stumped. I'm wondering if it's possible to access a specific key in an exported type and modify its value? Here is how I've exported ...

Each page in NextJS has a nearly identical JavaScript bundle size

After using NextJS for a considerable amount of time, I finally decided to take a closer look at the build folder and the console output when the build process is successful. To my surprise, I noticed something peculiar during one of these inspections. In ...

React Testing Library - Screen debug feature yields results that may vary from what is displayed in the

Greetings to all who come across this message. I have developed a tic-tac-toe game in typescript & redux with a 3x3 grid, and now I am facing some challenges while trying to write unit tests for it. Consider the following game board layout where X represen ...

quickest method for retrieving a property by name, regardless of its location within the object hierarchy

I am looking for a solution to retrieve the value of a property from an object graph, and I am wondering if there is a more efficient alternative to the method I have outlined below. Instead of using recursion, I have chosen tree traversal because it cons ...

Scrolling with React Event

I am attempting to create a scrollbar that only appears when I scroll within a particular area using React. I am utilizing debounce and useState in my implementation. The issue: When I reach the end of the scroll, the event continues to repeat indefinitel ...

Utilizing Jasmine with AngularJS: A Guide to Mocking the window.user.username

As a newcomer to using Jasmine, I am currently grappling with the task of mocking the window.user.username object while testing an AngularJS application. Let's say we have a variable called applicationUser that stores the value of window.user.usernam ...

The inline filter in angularJS is failing to function as expected within the ng-repeat loop

I am currently working with angularJS version 1.2.14. Within my interface, the ng-repeat function successfully displays the information as intended. However, there seems to be an issue with the filter functionality. Despite entering text into the input bo ...

Issues with Angular JS page loading when utilizing session and local storage in Google Chrome

I'm currently learning about AngularJS and I stumbled upon this helpful tutorial http://embed.plnkr.co/dd8Nk9PDFotCQu4yrnDg/ for building a simple SPA page. Everything was working smoothly in Firefox and IE, except when it came to using Local and Sess ...

Generate ES6 prototypes using TypeScript

Is it possible to enhance specific class methods in TypeScript by making them prototypes, even when the target is ES6? Additionally, can a specific class be configured to only produce prototypes? Consider the following TypeScript class: class Test { ...

Inability to assign a value to an @input within an Angular project

I recently started using Angular and I'm currently trying to declare an input. Specifically, I need the input to be a number rather than a string in an object within an array. However, I'm encountering difficulties and I can't figure out wha ...

Showcase -solely one property object- from numerous property objects enclosed within an array

Hello, I am seeking assistance as I have recently begun learning about angularJS. I am working with objects that have keys such as: scope.eventList=[]; for(){ var event = { id : hash, ...

Understanding how to use TypeScript modules with system exports in the browser using systemjs

Iā€™m facing an issue while using systemjs. I compiled this code with tsc and exported it: https://github.com/quantumjs/solar-popup/blob/master/package.json#L10 { "compilerOptions": { "module": "system", "target": "es5", "sourceMap": true, ...

What is the method for implementing type notation with `React.useState`?

Currently working with React 16.8.3 and hooks, I am trying to implement React.useState type Mode = 'confirm' | 'deny' type Option = Number | null const [mode, setMode] = React.useState('confirm') const [option, setOption] ...

$q.all - successfully resolving some HTTP requests while encountering errors on others

I encountered a coding scenario like this angular.forEach(config.tvshows.shows, function(show) { promises.push($http.get('http://epguides.frecar.no/show/' + show.replace(/\s|\./g, '') + '/next/')); }); re ...

I'm trying to figure out how to access the array field of an object in TypeScript. It seems like the type 'unknown' is required to have a '[Symbol.iterator]()' method that returns an iterator

I'm currently tackling an issue with my helper function that updates a form field based on the fieldname. For example, if it's the name field, then form.name will be updated. If it's user[0].name, then the name at index 0 of form.users will ...

AngularJS: Importing a parent directive within a child directive

Take a look at this Plunk example to understand better. I'm attempting to create a test scenario for accessing complex directives, but I encounter an error when trying to call a method from the parent directive: Parent Directive app.directive(&apos ...

Creating a personalized NPM package: Converting and exporting TypeScript definitions

Question: Do I need to adjust my TS configuration or add a TS build step? I recently developed a new npm package: Custom-NPM-Package / - src -- index.js -- index.d.ts -- IType.ts accompanied by this tsconfig.json: { "compilerOptions" ...

Utilizing variables to set the templateUrl in Angular2

Trying to assign a variable to the templateUrl in my component, but it's not functioning as expected. @Component({ selector: 'article', templateUrl: '{{article.html}}', styleUrls: ['styles/stylesheets/article.comp ...

Step-by-Step Guide: Running Multiple Yo Angular-Fullstack Applications on the Same Server and Port

On my development server, I have been experimenting with various applications. Currently, I am interested in running multiple yo angular-fullstack applications simultaneously on the same server, each having their own sub-directory. For instance, navigati ...