Issue observed with the functionality of checkAll and uncheckAll after a user interacts with a single checkbox

After completing an Angular course on Udemy, I decided to implement a custom checkbox in my Angular app. However, I encountered an issue where the UI was not updating properly when using checkAll and uncheckAll functions after the user interacted with an individual checkbox.

You can view my implementation on StackBlitz

Here are some of the things I have tried to solve the issue:

  • Utilizing a timeout (mainly for autofocus)
  • Using ChangeDetectorRef detectChanges()
  • Experimenting with template forms, although tr/tbody rendering proved problematic even when wrapped
  • Attempting to use reactive forms, though unsure if implemented correctly

To replicate the problem, follow these steps:

  1. Click on any checkbox except the first one.
  2. Try clicking on the first checkbox for checkAll or uncheckAll functionality - note that it does not affect the checkbox clicked in the initial step.
cssangular

Answer №1

The selected attribute signifies the initial state of the field. Deleting it won't make a difference if the field has been interacted with (or if its selected property has already been altered). The selected property can be changed through user interaction (clicking on the checkbox).

You should manipulate the selected property instead as it reflects the current status.

selectAll() {
  const checkboxes = document.querySelectorAll<HTMLInputElement>('input[type=checkbox]');
  checkboxes.forEach(checkbox => checkbox.checked = true)
}

deselectAll() {
  const checkboxes = document.querySelectorAll<HTMLInputElement>('input[type=checkbox]');
  checkboxes.forEach(checkbox => checkbox.checked = false)
}

Modified Stackblitz version

Note: This may not adhere to Angular's recommended method of handling form controls. It is advised not to directly manipulate the DOM for updating control values.

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

There appears to be an issue with the indexes of the PointCloud

After setting up a point cloud and attempting to change vertex colors upon clicking a point, I encountered some issues. Despite working out the vertex colors and necessary indices, the colors do not change as expected. The index values also seem confusing ...

angularthree.js

Various placements in Internet Explorer, Chrome, and Mozilla Firefox

Currently, I am working on a website project The layout appears to be fine in Internet Explorer and Firefox, but there seems to be an issue in Chrome. Due to the length of the code, it cannot be posted here, so I have included links to the files: HTML: ...

htmlcsscross-browser

Issue with Primeng p-chips component: unable to dynamically add objects

Passing an array of objects value1 to the p-chips component is causing some issues. app.component.ts import { Component } from '@angular/core'; import {MenuItem} from 'primeng/api'; @Component({ selector: 'app-root', tem ...

angularprimeng

Issue with loading CSS in Angular 8 upon refreshing the page after building in production

Here is the structure of my index.html: <!doctype html> <html lang="hu"> <head> <meta charset="utf-8"> <title>WebsiteName</title> <base href="/"> <meta name="viewport& ...

angulartypescriptroutespage-refresh

Is there an issue with hover not working for MUI styled component when focused?

Having trouble getting both focus and hover effects to work on the same MUI styled component in React. Check out this code sandbox for a demonstration. When clicking on the Select element, the background and border colors do not change: const SelectStyle ...

cssmaterial-ui

What is the process for setting a push key while pushing data to a Firebase database?

When writing data to the Firebase database using both Angular 4 on the frontend and Firebase functions on the backend, a unique push key is generated by Firebase. This key makes it difficult to access the data in the future. I am curious if there is a way ...

node.jsangularfirebasefirebase-realtime-databasegoogle-cloud-functions

What could be causing these Typescript compilation errors I am experiencing?

I am puzzled by the appearance of these errors, especially since I copied the entire ClientApp folder from a running application where they did not exist. Here is the structure of my project: This is my package.json file: { "name": "crossvertise-calan ...

.netnode.jsangulartypescriptsingle-page-application

Testing ngrx effects action failure and how it impacts the

Having issues with this particular effect login$ = createEffect(() => this.actions$.pipe( ofType(AuthActions.login), exhaustMap((action) => this.service.login(action.credentials).pipe( map((data: LoginResponseDto) =& ...

angularngrxangular-test

Ways to display "No records" message when the filter in the material table in Angular returns no results

How can I implement a "No Records Message" for when the current table is displaying empty data? Check out this link for examples of material tables in AngularJS: https://material.angular.io/components/table/examples ...

javascriptangulartypescriptangular-material

Issue with the MUI Autocomplete display in my form

Recently, I started using Material UI and Tailwind CSS for my project. However, I encountered an issue with the Autocomplete component where the input overlaps with the following DatePicker when there is multiple data in the Autocomplete. I have attached a ...

csstypescriptnext.jsmaterial-uitailwind-css

Bug in ZURB Foundation Topbar causes incorrect highlighting of links on mobile when clicked

While utilizing the ZURB Foundation Topbar, I have encountered a bug that I find frustrating. When navigating the 2nd level drop downs and clicking on a link (li elements), the active highlight flickers to one of the elements above before taking you to the ...

csshtmlzurb-foundation

Achieve full height in Grid component of material UI by eliminating margins

In this codesandbox example, I have successfully set the grid container height to full using 100vh. However, there is an issue with a margin of 8px being added by the user agent to the body element, and I'm struggling to find a solution to remove it. ...

cssresponsive-designmaterial-uigridresponsive

How to display HTML on top without altering the viewport in React?

I am trying to display a component <Top /> above another component <Bottom /> in React. The code structure is as follows: ... [top, setTop] = useState(false); [bottom, setBottom] = useState(true); ... return ( <div> top && (< ...

htmlcssreactjsrenderviewport

Generating dynamic text in Angular based on certain conditions

I am still learning about Angular. Can someone please explain how to make text dynamic based on a count? For example, if the count is greater than 2, the text should be "Teams," and if it is less than or equal to 2, the text should be "Team." Here is what ...

angular

Tips for maintaining an open ng-multiselect-dropdown at all times

https://www.npmjs.com/package/ng-multiselect-dropdown I have integrated the ng multiselect dropdown in my Angular project and I am facing an issue where I want to keep it always open. I attempted using the defaultOpen option but it closes automatically. ...

htmlangulartypescriptng-multiselect-dropdown

The not:first-child selector targets all elements except for the first one in the sequence

This is a simple js gallery. I am using not:first-child to display only one photo when the page is loaded. However, it does not hide the other photos. You can view the gallery at this link: (please note that some photos are +18). My objective is to hide ...

javascripthtmlcss

Error: Cannot access Angular 5 Title service at this time

When attempting to change the page title using BrowserModule, I encountered an issue. I added the BrowserModule and Title in the application module as shown here: https://angular.io/guide/set-document-title However, in a child module where I tried to add ...

angulartypescripttitle

Fine-tuning the design of the Box Model layout

I can't seem to get the table in my code to center properly and not be stuck against the left border. Despite trying various solutions, the table in column 2 is floating off to the left and touching the border. I need it to be more centered within the ...

htmlcsslayout

Display all elements that come before and after the current element

For debugging purposes, I need to output the IDs of all previous images in a check. The issue arises when trying to assign classes to all previous elements using the script below, as the images are not being added to the correct classes. $(document).on(&a ...

jqueryhtmlcss

Display elements with a particular class using jQuery

I want to utilize jQuery to show all elements within a UL that have the class .active. Is this how my code should look? if ($(this).hasClass('active')) { $( ".active" ).show(); } This is my HTML structure <ul> <li>&l ...

jquerycssshow