Is it required to double click checkboxes to uncheck them?

My checkboxes require 2 clicks to be unchecked, even though one click is enough to check them. This issue occurs in all 7 checkboxes and there is no onchange() function or similar in TS.

import { Component, OnInit, Inject } from '@angular/core';
import { PHPAPIService } from '../../php-api.service';
import * as socketIO from 'socket.io-client';
import {MatTableModule} from '@angular/material/table';
import * as $ from 'jquery';
import { ToastrService } from 'ngx-toastr';

import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';

export interface DialogData {
  name: string;
}

@Component({
  selector: 'app-module',
  templateUrl: './module.component.html',
  styleUrls: ['./module.component.css'],
  providers: [PHPAPIService]
})
export class ModuleComponent implements OnInit {

toastChanges = 0;
xForToastMSG = 1;
moduleTimer = [];
  
  fileToUpload: File = null;

  moduleExpandState = [];

  constructor(public PHPAPIService:PHPAPIService,  private toastrService: ToastrService, public dialog: MatDialog) { 
  }
 
  ngOnInit() {
    for(var i=0;i<1000;i++)
      this.moduleExpandState[i] = false;

this.PHPAPIService.get("tprofile").subscribe(
      (data) =>  this.PHPAPIService.profiles = data
    );
    this.PHPAPIService.get("ttimer").subscribe(
      (data) => this.PHPAPIService.timers = data
    );
    this.PHPAPIService.get("tmodule").subscribe(
      (data) => this.PHPAPIService.modules = data
    );

    const socket = socketIO(this.PHPAPIService.apiUrl);
  socket.on('tmodule', (snapshot) => this.PHPAPIService.modules = snapshot);
    socket.on('timeUpdate', (snapshot) => this.PHPAPIService.date = snapshot);


      setTimeout(()=>{
      for(var i=0; i< this.PHPAPIService.modules.length ;i++){
        /*Converts individual HH and MM data into a single HH:MM string*/
        this.moduleTimer[i] = this.PHPAPIService.modules[i].time_h + ":" + this.PHPAPIService.modules[i].time_m;
        //console.log(this.localTimerVar[i].on);
      }
  },1200);
    //socket.on('tmodule', () => this.showSuccess()); 
  }

  showWarning(text) {
    this.toastrService.warning(text,'',{
      positionClass: 'toast-bottom-right'
    });
  }


uploadFileToActivity(files: FileList) {
  this.fileToUpload = files.item(0);
  console.log(files.item(0));

  if(files.item(0).name.substring(0,6) === 'module'){
    this.PHPAPIService.uploadBackupModule(files.item(0)).subscribe(data => {
      this.showSuccess('Import successful!');
      console.log(data);
    }, error => {
      console.log(error);
    });
  }else{
     this.showWarning('invalid file');
  }
  }

- Additional lines omitted for brevity -

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

Retrieve elements from a separate pom file

I am looking to organize my web elements by defining them in a separate js file from my test file using Protractor. In my pom.js object, I have set up the following: let web_elements = function() { this.get_login_mail, function() { ...

Design a div in the shape of a trapezium with clipped overflow

Is there a way to create a trapezium using CSS/Html/Canvas? I have attempted to do so, but my current method is messy and not practical. div { width:0; margin-left:-1000px; height:100px; border-right:1000px solid lightblue; border-top:60px solid tra ...

Google Web Fonts: Exploring the World of Font Weight Variations

It's quite puzzling as to why the weight of my Google web font in the navigation menu keeps changing on different pages even though I have specifically set it to 700. The CSS for the menu is exactly the same across all pages. Can anyone shed some ligh ...

The Hamburger Menu in the Bootstrap Navbar is failing to collapse

My website uses Bootstrap v5.3 and I've added a navbar, but the hamburger icon is not collapsing on mobile devices when clicked. Can someone please review my code to see if there are any issues? I can't figure out what's wrong. <!DOCTY ...

Applying toggle() using css to manipulate various elements at once

Is there a way to toggle multiple divs of varying heights, all with the same class? What is the most effective approach to achieve this? http://jsfiddle.net/hS6RH/41/ $('.smallify').on('click', function() { if ($(this).parent(&apo ...

Encountering an issue with Angular where all parameters for NgZone cannot be resolved

Currently, I am in the process of learning Angular and experimenting with the Firebase Authentication services. However, every time I try to load the component that utilizes this service, I encounter an error. Error: Can't resolve all parameters for N ...

The ngIf directive in Ionic 2 does not refresh after a user logs in

I'm facing an issue with the *ngIf directive in Ionic 2. Below is my code: <div *ngIf="isLogin" class="profile-info ng-binding padding text-center" (click)="openPage(accountPage)"> {{userEmail}} <span menu-toggle="menu-togg ...

Issue with displaying data using a custom pure pipe and boolean in ngIf condition

For my current web project, I require a friendship/follow feature. There are two roles involved: admins and regular users. Regular users have the ability to follow other users, while admins do not possess this capability. When a user wishes to follow anot ...

Easily showcase a limitless number of items within a 10-column grid using Bootstrap!

This is the code snippet: <div *ngFor="let minute of state.minutes.specificMinutes.selectedMinutes | keyvalue" class="col-sm-1 checkbox-container"> <div class="custom-control custom-checkbox"> <input type="checkbox" (click)="state.m ...

Tips for effectively utilizing the display: inline property in conjunction with ng-repeat

I am struggling to create a timeline with a broken structure on my website. I suspect that the issue lies in using display:inline. When attempting to apply this to my site: https://i.stack.imgur.com/4Ur7k.png the layout gets distorted: https://i.stack.i ...

What is the process for including or excluding a class from a horizontal scrollbar?

I've been trying to implement a back to top button on a horizontally scrolling page. However, I'm encountering difficulties in adding or removing the necessary class to show or hide the button. Here's the JavaScript code I'm using: $( ...

The custom validator in Material2 Datepicker successfully returns a date object instead of a string

Im currently working on developing a unique custom validator for the datepicker feature within a reactive form group. Within my code file, specifically the .ts file: form: FormGroup; constructor( private fb: FormBuilder, ...

Learn how to display every ASCII or EBCDIC character once radio buttons have been selected

I'm currently working on a simple website that requires the user to input a minimum of 256 characters, choose between ASCII or EBCDIC for conversion, and then click the submit button (Run) to display the final converted result on the page. However, I& ...

Exploring the functionality of v-chips within a v-text-field

I am trying to implement a search text field using vuetify's v-text-field, and I want to display the user input in a chip (such as v-chip or v-combo-box). However, v-text-field does not seem to support chips based on the documentation. Is there a work ...

Is there a way to switch between showing and hiding all images rather than just hiding them one by one?

Is there a way I can modify my code to create a button that toggles between hiding and showing all images (under the user_upload class), instead of just hiding them? function hidei(id) { $('.user_upload').toggle(); Any suggestions would be grea ...

Why do style assignments lose their motion when executed right after being made?

If you take a look at this specific fiddle in Webkit, you will see exactly what I am referring to. Is there a way to define the style of an element when it is first specified, and then its final state? I would like to be able to fully define a single-ste ...

Troubleshooting issue arising from transferring code from CodePen to a text editor

I've attempted to recreate a Codepen example in my HTML files on my computer, but it's not displaying correctly. While the static layout resembles what appears in Codepen, the background with the moving squares isn't functioning as expected ...

Ensure that divs can adjust in size while maintaining the same dimensions of their contained

I'm currently facing a slight issue with these two divs. I want them to be scalable, which I know can be achieved by using percentages, but every time I do so, the divs end up out of position. When I try setting widths, they look fine in Google Chrome ...

Unable to switch the text option

[Fiddle] I'm currently working on a project where I want pairs of buttons to toggle text by matching data attributes. While I can successfully change the text from "Add" to "Remove" on click, I am facing an issue with toggling it back to "Add" on the ...

Refreshing HTML tables with AJAX in Django

After going through all the posts here, I found that some are outdated and others don't quite match my issue. Apologies for bringing it up again. I have a basic HTML table with data in it. My goal is to update this data without refreshing the entire ...