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

Trouble with HTTP.GET Request within a Previous Event Situation

Whenever I attempt to use a previous event to fetch data from my API, the information seems to disappear once outside the subscribe block. I experimented with relocating the service outside of the component, but encountered the same issue. myObject :S ...

angularangular7

Is there a way to shift this modal to the right?

I am facing an issue with aligning a button modal to the right side. I attempted using bootstrap classes like : float:right, mt:20 Unfortunately, these did not have the desired effect. Below is my code snippet: <b-modal ref="my-modal" hide-fo ...

htmlcsstwitter-bootstrapvue.js

Problem with the hover functionality of the <li> tag

I'm having an issue with applying the hover property to the li element in the sidebar. The hover effect works, but the icon tag is not showing the hover effect. I want the icon to also show the hover effect along with the li's hover effect. Here ...

htmlcssbootstrap-4

Eliminate the gap between spans when wrapping words

I am facing a challenge with displaying text and an icon together in a div. The requirement is for the icon to always be positioned right next to the text, even when the text wraps due to limited space. Various solutions have been attempted, but they all ...

htmlcssflexbox

Steps for transferring Children to the Angular Directive correctly

I'm having trouble passing FormGroups that are inside children components to my directive. Why are they not being passed correctly? I attempted to use both ViewChildren and ContentChildren, but the result returned is undefined. <div block="ta ...

angularangularjsangular-reactive-formsformgroupsviewchild

When a form contains a ViewChild element, changes to the ViewChild element do not automatically mark the

Let's set the stage: MainComponent.html <form #someForm > <input type="text" name="title" [(ngModel)]="mainVar" /> <child-component /> <input type="submit" [disabled]="someForm.form.pristine" /> </form> ChildComp ...

javascripthtmlformsangularangular2-forms

Angular components are persisting instead of being destroyed

When navigating to a new page in my Angular application, I've noticed that the component from the previous page remains in memory instead of being destroyed. This results in a new instance being created when I navigate back to that page. The applicat ...

angularwebpackrouteswebpack-dev-server

What is the best way to select the <span> element following an HTML tag?

Is there a way to target the first child of a span after a specific HTML tag? Here is an example of my markup: <div class="gad-help"> <a href="#">AdWords Guide<br><span>ensure best results</span></a> </div> H ...

htmlcsscss-selectors

Could someone please provide guidance on how to assign a datepicker value to my form using ng-model?

Check out datepicker.ts import { Component, HostListener, ViewChild } from '@angular/core'; import { BsDatepickerDirective } from 'ngx-bootstrap/datepicker'; @Component({ selector: 'demo-date-picker-hide-on-scroll', ...

angularangular6angular4-formsngx-bootstrap

`Observing a nearby external library while running the application`

I am currently working on a main app alongside some independent libraries. To incorporate changes from the library into the main app, I have been including the .tgz file in the main app's package.json. However, this process requires me to build and pa ...

angular

Create paper "cut" borders using HTML canvas or pseudo-elements

As a designer with a penchant for pain, I am striving to achieve an "art nouveau" aesthetic on paper for my NextJS project with MUI as the main design solution. Despite the abundance of CSS in the background, I am faced with the challenge of creating inner ...

csscanvasnext.jscss-selectorsborder

Styling jQuery Draggable and Droppable <li> elements

I am facing a challenge with my drag and drop functionality using jQuery. While the drag drop feature works perfectly, I need to display two separate pieces of information from a database on each "li" item in different styles. My goal is to include a "tra ...

jqueryhtmlcss

Issue with service injection within a singleton service in Angular2

Currently, I have two services in my application. ServiceA is non-singleton and provided to components through the Providers array, while ServiceB is a singleton that is listed in its module's Providers array. Both services work perfectly fine indepen ...

angulartypescriptdependency-injection

Tips for transforming an Observable stream into an Observable Array

My goal is to fetch a list of dogs from a database and return it as an Observable<Dog[]>. However, whenever I attempt to convert the incoming stream to an array by using toArray() or any other method, no data is returned when calling the retrieveDo ...

javascriptangularreactjstypescriptobservable

Utilizing functions from external modules in Angular

Recently, I created an es6 module with some exported functions and published it on npm after uploading its transpiled es5 code. Right now, I am in the process of trying to integrate this package into an Angular project that utilizes SystemJS as a module l ...

angularnpmes6-modules

Unveiling the Swiper Instance with getSwiper in Ionic5 and Angular

Currently, I am integrating ion-slides into my Ionic 5 project built with Angular. In accordance with the instructions provided in this documentation, I aim to retrieve the Swiper instance by utilizing the getSwiper method so that I can leverage the functi ...

angularionic-frameworkionic5swiper.js

What is the best way to activate multiple events within an overlapping area containing multiple divs at the same

How can I trigger events on same level divs that overlap in different areas? When there are multiple divs overlapping, only one of them gets triggered. Is there a way to trigger events on all overlapped same level divs? Here is an example code snippet: ...

javascripthtmlcss

Is it possible to pass a parameter to an NGXS action that is not the Payload?

I am working on implementing an Ngxs action that includes a parameter in addition to the payload. This parameter is used to determine whether or not a notification should be sent. @Action(UpdateUser) async UpdateUser( ctx: StateContext<ProfileStat ...

javascriptangularngxs

Angular tutorial: Changing website language with translation features

Looking to translate my existing Russian website into another language using angular localization. Any recommendations on where I can find resources or tutorials for this? ...

angularlocalization

Discovering the font-weight attribute in Selenium IDE

Currently, I am working with Selenium IDE and aim to detect when a text element has the 'font-weight:bold' CSS property applied to it using 'verifyAttribute'. The specific CSS locator being used is: css=body.home.es ul#languages li:nt ...

cssdomseleniumcss-selectorsselenium-ide