Angular 2, the change event is not triggering when a bootstrap checkbox is clicked

Encountering an issue, the (change) function is not triggering in a specific checkbox.

<input [(ngModel)]="driver.glasses" name="glasses" type="checkbox" class="make-switch"
   (change)="changeFunction()" data-on-color="primary" data-off-color="info">

Interestingly, it works perfectly fine with this one:

<input [(ngModel)]="driver.glasses" name="glasses" type="checkbox" 
   (change)="changeFunction()" data-on-color="primary" data-off-color="info">

The culprit seems to be the class="make-switch" attribute, as the first checkbox with this class fails to trigger the (change) event. Is there a way to resolve this while still utilizing the class="make-switch" for the switch functionality?

javascripttwitter-bootstrapangulartypescript

Answer №1

To implement ngModelChange, follow these steps:

In your component.ts file, add the following code: 

checkboxValue: any;

changeEvent(event: any) {
    console.log(event);
  }
<input type="checkbox" [ngModel]="checkboxValue" (ngModelChange)="changeEvent($event)" data-md-icheck/>

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

Tips on expanding properties for Material-UI components with Typescript?

My goal is to enhance the props of the Button component from Material-UI using typescript in order to pass additional props to its children. import { NavLink } from 'react-router-dom'; import { Button } from 'material-ui'; <Button ...

reactjstypescriptmaterial-ui

Deactivate the other RadioButtons within an Asp.net RadioButtonList when one of them is chosen

Is there a way to disable other asp.net radio buttons when one of them is selected? I have three radio buttons, and I want to disable the other two when one is selected. After doing some research, I managed to disable the other two when the third one is se ...

javascriptc#jqueryasp.net

Using Angular 2 to Toggle a Checkbox when a Div is Clicked

Whenever a user clicks on a unit div, I want to target the checkbox and mark it as checked/unchecked. I also want to apply the class unit-selected if the checkbox is checked, and remove the class unit-selected if the checkbox is unchecked. I have tried lo ...

angular

Remove observableB if it is triggered 1 second after observableA

Imagine having two different observables, known as observableA and observableB. There are 3 possible scenarios for how these observables can be activated: only observableA is activated. only observableB is activated. observableA is activated first, follo ...

angularrxjsrxjs-pipeable-operators

Repeating every 3 to 6 months on later.js commencing from a specified date

Currently, I am working on setting up recurring events every 3 and 6 months using the later.js library which can be found at https://github.com/bunkat/later. The code implementation looks like this: // Assuming my value.scheduled_date is set to 2018-09-0 ...

javascriptnode.jslaterjs

Difficulty parsing JSON in MVC .Net Core Controller

I am dealing with a Web Application built in ASP.Net Core 5 that communicates with a Web API in .Net Core. The data returned from the API in JSON format needs to be read from a file named landing.js. Despite the data being stored in the variable (data), I ...

javascriptjqueryjsonasp.net-mvcasp.net-core

What is the best way to update an array within an object using Redux?

I am currently working on a code for redux that involves an array. const initialState = [{ id: '1', title: '', description: '' }]; My goal is to update the array to contain two objects like this: [{ id: '1', title: ...

javascriptreactjsreact-redux

Body Parser causing unexpected output

Currently encountering an issue when attempting to log the body of a POST request in my console. Despite seeing the payload in my Chrome console with the correct data, I am receiving the following error: express_1 | TypeError: Cannot read property ' ...

javascriptexpresspostbody-parser

"Using Javascript to assign a class based on a date being greater than

I am facing an issue with a script that applies a CSS class to table cells if the date is greater than a certain value. Currently, the script only works for today's date. I need it to work for dates within and outside of this week as well. $('td ...

javascriptjquerycssdate

Encountering the 404 Not Found error when trying to fetch the Next.js API Route from the app

Currently facing difficulties with the routing in Next.js 13's app. Every time I attempt to access it, for instance via Postman, I keep getting a 404 Not Found error. This is my file structure: https://i.stack.imgur.com/ZWrlb.png An example of one ...

javascriptreactjsnext.jsprisma

a guide to structuring REST API requests with axios in Vue.js

In my Vue.js app, I am utilizing Axios to consume a REST API. Each time I make an API call, I create a new instance of Axios with the necessary authentication headers by calling axios.get in various places. // UserdataComponent.vue const anInstance = axio ...

javascriptvue.jsaxios

Issue encountered when trying to pass a string into URLSearchParams

const sortString = req.query.sort as string const params = Object.fromEntries(new URLSearchParams(sortString)) Upon moving to the implementation phase, I encountered: declare var URLSearchParams: { prototype: URLSearchParams; new(init?: string[][] ...

typescriptecmascript-6

cookies cannot be obtained from ExecutionContext

I've been trying to obtain a cookie while working with the nestjs and graphql technologies. However, I encountered an issue when it came to validating the cookies by implementing graphql on the module and creating a UseGuard. It was suggested that I ...

typescriptgraphqlnestjs

Using asynchronous functions in a loop in Node.js

Although this question may have been asked before, I am struggling to understand how things work and that is why I am starting a new thread. con.query(sql,[req.params.quizId],(err,rows,fields)=>{ //rows contains questions if(err) throw err; ...

javascriptnode.jsangulartypescript

What is the process for indicating an option as "chosen" within Embedded JavaScript Templating (EJS)?

I've been working on a function that allows users to modify each other's data, including the ability to change roles. I'm having trouble getting the select form to display the current role of a user with the "selected" attribute. This is wh ...

javascriptexpressmongooseejs

How to delete a line from a file in Node.js without modifying the buffer variable

Hello everyone, I am just starting to explore the world of Nodejs Recently, I created a function that reads data from a file, saves it in an array variable, and then makes some changes to this variable before writing it back to the file. The code snippet ...

javascriptnode.jspromisemutation

The issue of a non-firing Ajax click event in a JavaScript file

I have set up a table in JSP and am attempting to trigger a function when clicking on the table rows to post the data. I created a JavaScript file with an ajax click event, but unfortunately, the event is not being fired. $(document).ready(function( ...

javascriptjavaajaxjsponclicklistener

Ways to generate multiple elements using JavaScript

Is there a way to dynamically freeze columns in a table as I scroll it horizontally? I've achieved this statically using JavaScript, but is there a way to indicate the number of columns and achieve the desired style? This is what my JavaScript code c ...

javascripthtmlcssdom

hashSync function needs both data and salt to generate the hash

I can't figure out why I am encountering this issue, I have checked the documentation and couldn't find my mistake. Any suggestions? Error: data and salt arguments required const {create} = require('./user.service'); const {genSaltS ...

javascriptmysqlnode.jsexpress

Tips on effectively storing extra object properties across all entries in a MongoDB document group

Currently, I have a node module that involves parsing a .csv file into MongoDB documents. The issue I am encountering is that only the first inserted document contains certain metadata fields, while the rest do not retain these fields. I am seeking guidan ...

javascriptnode.jsmongodbmean-stack