Unable to programmatically uncheck a checkbox after it has been manually checked: Angular

Question

Unable to programmatically uncheck a checkbox after it has been manually checked: Angular

After being selected through the UI by clicking on the checkbox, I am encountering an issue where I cannot unselect the checkbox programmatically.

To see this behavior in action, visit the sample app, where you can click on the checkbox to select it and then click on the 'Un Check' button. Despite the property in the background switching to false, the checkbox remains selected.

Please note:

If the checkbox is not manually selected, both selecting and deselecting works as expected when done programmatically.

For further exploration, you can access the code editor here.

angular typescript checkbox

Answer 1

Answer №1

In the provided code snippet, the usage of input [checked] indicates a one-way binding.

To achieve two-way binding or to be more specific, the ability to both retrieve and set the value, you may require a setter function along with your existing logic.

If you opt not to utilize ngModel as demonstrated in the current code, consider utilizing the (change) event to update the value together with a setter function:
```
get IsChecked(): boolean {
  return this._isChecked;
}
set IsChecked(val) {
  this._isChecked = val;
}
```
The corresponding HTML implementation would be:
```
<input type="checkbox" [checked]="IsChecked" (change)="IsChecked = !IsChecked"/>
```
Alternatively, you can also make use of ngModel.

<input type="checkbox" [(ngModel)]="IsChecked"/>

which further expands to:

<input type="checkbox" [ngModel]="IsChecked" (ngModelChange)="IsChecked = !$event"/>

providing similar functionality to [checked] combined with (change) events

Answer 2

In the provided code snippet, the usage of input [checked] indicates a one-way binding.

To achieve two-way binding or to be more specific, the ability to both retrieve and set the value, you may require a setter function along with your existing logic.

If you opt not to utilize ngModel as demonstrated in the current code, consider utilizing the (change) event to update the value together with a setter function:
```
get IsChecked(): boolean {
  return this._isChecked;
}
set IsChecked(val) {
  this._isChecked = val;
}
```
The corresponding HTML implementation would be:
```
<input type="checkbox" [checked]="IsChecked" (change)="IsChecked = !IsChecked"/>
```
Alternatively, you can also make use of ngModel.

<input type="checkbox" [(ngModel)]="IsChecked"/>

which further expands to:

<input type="checkbox" [ngModel]="IsChecked" (ngModelChange)="IsChecked = !$event"/>

providing similar functionality to [checked] combined with (change) events

Answer 3

Answer №2

Modify the input in app.component.html to look like this:

<input type="checkbox" [checked]="IsChecked" (change)="onCheckedChanged()" />

and include the following code in your app.component.ts:

  onCheckedChanged() {
   this._isChecked = !this._isChecked;
  }

The Reasoning Behind the Changes:

Although you correctly bound the checked attribute to the IsChecked getter, it only updates when changes occur to IsChecked, which is why the checkboxes were not functioning properly.

When clicking on the checkbox itself, the IsChecked property does not change, hence the need to actively listen for the change event and update the IsChecked (or rather the this._isChecked) property through code.

Additionally, it is common practice in Typescript and Angular to begin class fields with a lowercase letter based on the usual conventions.

Answer 4

Modify the input in app.component.html to look like this:

<input type="checkbox" [checked]="IsChecked" (change)="onCheckedChanged()" />

and include the following code in your app.component.ts:

  onCheckedChanged() {
   this._isChecked = !this._isChecked;
  }

The Reasoning Behind the Changes:

Although you correctly bound the checked attribute to the IsChecked getter, it only updates when changes occur to IsChecked, which is why the checkboxes were not functioning properly.

When clicking on the checkbox itself, the IsChecked property does not change, hence the need to actively listen for the change event and update the IsChecked (or rather the this._isChecked) property through code.

Additionally, it is common practice in Typescript and Angular to begin class fields with a lowercase letter based on the usual conventions.

Unable to programmatically uncheck a checkbox after it has been manually checked: Angular

Answer №1

Answer №2

The Reasoning Behind the Changes:

Similar questions

Definitions provided for Redux (Toolkit) store including preloadedState

Using TypeScript to assert the type of a single member in a union of tuples, while letting TypeScript infer the types of the other members

Dealing with Nested Body Payload in PATCH Requests with Constructor in DTOs in NestJS

I keep receiving multiple header errors from ExpressJS even though I am positive that I am only sending a single header

Issue with installing angular CLI on Windows 10

Having trouble with the npm Fluid Player installation

Tips for composing content on a sanitized input?

Unable to initialize the ng2-admin Angular2 Bootstrap template on a Go server due to a failed download attempt

The utilization of angular2-materialize is not possible due to an error message indicating that jQuery.easing is undefined

Unable to retrieve values using any = {} in TypeScript Angular 8

What is the abbreviation for a 'nested' type within a class in TypeScript?

Utilizing a background image property within a styled component - Exploring with Typescript and Next.js

Achieve perfect alignment of Bootstrap checkboxes

Is there a way to trigger the opening of the mat-autocomplete panel when an option is selected in a different mat-autocomplete component?

"Encountering issues when trying to retrieve a global variable in TypeScript

Angular2 Components with Unique Styling

The ability to choose only one option in a checkbox within a grid view column

The Angular component fails to load in the browser because of a problem with the Observable subscription

Exploring the Validation of Forms in Angular for Practical Implementations

What is the process for retrieving the parent component from projected content?