Trigger change event on model update in Angular 4 checkboxes

CSS

<div class="checkbox-item">
  <input type="checkbox" id="1" [(ngModel)]="filter" (change)="onFilterChange($event)"> CheckBox
</div>

<button (click)="filter = !filter">Change Status</button>

JavaScript

export class FilterStatus {

  filter : false;

  onFilterChange() {
    console.log('Filter change called');
  }
}

When I directly click on the checkbox, the change event is triggered. But when I click on the "Change Status" button, the checkbox status changes but the change event is not triggering. Can someone please provide insight on how to resolve this issue?

angulartypescriptcheckboxangular-ngmodel

Answer №1

We need to implement this feature using an event handler and not through two-way binding.

<input type="checkbox" id="1"
       [ngModel]="filter" (ngModelChange)="onFilterChange($event)"> Checkbox

<button (click)="onFilterChange($event)">Change Status</button>

And in the TypeScript file:

export class HelloWorld {

  filter = false;

  onFilterChange(eve: any) {
    this.filter = !this.filter;
  }
}

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

Is ts-node necessary for using TypeScript in Node.js?

Having trouble setting up a Node.js application in Visual Studio Code using TypeScript due to issues with importing modules. Initially, I created an index.ts file with the import statement -> import config from './app/config.json'; This resu ...

node.jstypescriptvisual-studio-codets-node

What is the best way to choose a key from a discriminated union type?

I have a discriminated union with different types type MyDUnion = { type: "anonymous"; name: string } | { type: "google"; idToken: string }; I am trying to directly access the 'name' key from the discriminator union, like thi ...

javascripttypescriptdiscriminated-union

Using Typescript to extract and process keys of a certain type from an object

I am dealing with an object type that has keys corresponding to values of various types, including number, string, optional number, and optional string: interface MyObject { mandatoryNumber: number; optionalNumber?: number; mandatoryString: string; ...

typescript

TypeScript and Node.js: The type of 'this' is implicitly set to 'any'

Help Needed with TypeScript issue: An issue is arising in my TypeScript code related to a mongoose schema's post function. It is used to generate a profile for a user upon signing up, using the User model. Even though the code functions properly, th ...

node.jstypescriptexpressmongoosetypescript-typings

Error: Promises must be managed correctly

I've been working on a timer-based function that is supposed to run once a week and create almost identical copies of existing documents. However, every time I try to execute it, I encounter the error message "Promises must be handled appropriately." ...

javascripttypescriptgoogle-cloud-functions

Attention Needed - Certain vulnerabilities necessitate manual review for resolution

npm audit === Security Report from npm audit === # You have 1 vulnerability that can be resolved by running `npm update terser-webpack-plugin --depth 3` Severity Issue ...

angulartypescriptnpmionic4

After pressing submit, any associated links should automatically open in a separate tab

I have a homework assignment that requires creating a form with multiple elements, including a checkbox. Once this checkbox is checked, the links displayed on the resulting page should open in a new tab. The catch? I can only use HTML and CSS - no JavaScri ...

htmlformsinputcheckbox

getItemForm does not make a second promise call

I have a scenario where my function calls the api.send service twice, however when I run a test expecting it to resolve both promises, only res1 is returned and not res2. How can I ensure that both promises are resolved successfully? Here is my function: ...

angulartypescriptkarma-jasmine

Serverless-offline is unable to identify the GraphQL handler as a valid function

While attempting to transition my serverless nodejs graphql api to utilize typescript, I encountered an error in which serverless indicated that the graphql handler is not recognized as a function. The following error message was generated: Error: Server ...

typescriptwebpackapollo-serverserverless-offline

Deploying Angular 6 on Heroku with modifications

For my angular 5 app, I utilized this express code for deployment. const express = require('express'); const path = require('path'); const app = express(); app.use(express.static(__dirname + '/dist')); app.get('/*&a ...

angularexpressherokuangular6

Developing a TypeScript PureMVC project from scratch

Currently, I am working on a project to implement PureMVC in TypeScript using npm and grunt. Unfortunately, PureMVC has ended development on their project and there is a lack of resources for PureMVC in TypeScript online. The documentation only provides in ...

node.jstypescriptnpmgruntjspuremvc

What is the best way to reassign key-value pairs in JSON mapping using JavaScript/TypeScript?

Given {"a": {"name": "king", "firstname": "Thomas"},"b": {"age": "21"}} I'm exploring a simple way to convert it to {"name": "king","firstname": "Thomas","age": "21"} In the realm of Javascript/Angular. Any helpful suggestions are greatly appreci ...

javascriptjsonangularmappingkey-value

Issues with Form Submission in Ionic 3

As a newcomer to Ionic 3 and Angular, I have been working on a login form with form validation in Ionic based on tutorials from Google. Despite following their instructions step by step, I am unable to get my form submitted. I am having trouble pinpointing ...

angularformsionic-frameworkionic3

AngularJS Kendo Date Picker: A Simplified Way to Select

Having trouble with formatting dates in my local timezone, the date picker is displaying it incorrectly. Here's an example of the code: input id="logdate" kendo-date-picker="logdate" k-options="logdateOptions" data-ng-model="logFilter.date" k-ng-mode ...

angularkendo-uimodel

Creating horizontal cards with Angular MaterialWould you like to learn how to design

I need help converting these vertical cards into horizontal cards. Currently, I am utilizing the Angular Material Cards component. While I can successfully create cards in a vertical layout, my goal is to arrange them horizontally. Below is the code sni ...

htmlcssangularangular-material

The div is not showing the image as expected

Having some trouble creating a slideshow within my angular application. Struggling to get the images to display in the html code. To tackle this, I decided to create a separate component specifically for the slideshow (carousel.component). In the main app ...

cssangular

Enhancing code completion with IntelliSense for customized styled components' themes

When using a theme in styled components, I am attempting to enable IntelliSense. In my code snippet below (index.tsx), I utilize ThemeProvider: import React from 'react'; import ReactDOM from 'react-dom/client'; import { ThemeProvider } ...

typescriptstyled-componentsreact-typescript

Using the `document.querySelector` method to target the `.mat-progress-bar-fill::after` element

Is there a way to dynamically adjust the fill value of an Angular Material Progress Bar? In CSS, I can achieve this with: ::ng-deep .mat-progress-bar-fill::after { background-color: red; } However, since the value needs to be dynamic, I am unable to do ...

cssangularangular-material

What is the process for extracting components from a JSON file using an observable in Angular?

Take a look at this snippet of code: response: any; fetchData(url: any) { this.response = this.http.get(url); } ngOnInit(): void { fetchData("url.com/data.json"); console.log(this.response) } When I check the console, I see Obser ...

javascriptjsonangularrxjsobservable

Can you guide me on how to specify the return type in NestJS for the Session User in a request?

async authenticated(@Req() request: Request) { const user = request.user return user } It is important for the 'user' variable to have the correct type globally. While working with express passport, I came across the following: decl ...

typescriptnestjs