Refreshing Angular 4 Checkboxes: A Step-by-Step Guide

I am facing an issue with a checkbox bound to an array of type Interface. The Interface looks like this:

export interface IdataTypes {
      Categories: string,
      isSelected: boolean,
    }
    

This is how it is bound:

<div *ngFor="let DT of DTofSectores">
        <input type="checkbox"
               name="DTofSectors"
               formControlName="DTofSectors"
               value="{{DT.Categories}}"
               (change)="onDataTypeClick($event,DT,'DTofSectors')" >
        {{DT.Categories}}
    </div>
    

The checkbox gets filled based on the selection from a dropdown list. My problem is that I want to clear all checked checkboxes when the dropdown changes.

EDIT: I have attempted to reset the bound array to null whenever the dropdown changes as shown below:

this.DSofSectores.push({
        category :"",
        isSelected : false
    })
    

However, this leaves the array empty and no checkboxes are displayed!

Answer №1

To easily activate a function when the selection in the dropdown menu is altered (utilizing ng-change) and set ng-checked = "false" for all checkboxes. To simplify, connect the checkboxes with a value that transitions to false whenever the dropdown selection changes.

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

having difficulty placing 3 pop-up windows on a single page

Struggling to implement multiple popups on my page, each with a unique ID assigned. Any assistance would be greatly appreciated. Here is the code snippet: .fa { font-size: 50px; cursor: pointer; user-select: none; } .fa:hover { font-size:20px; t ...

Having issues with a local image not loading in React?

I am trying to display a local image in React js. After referring to this solution, I have tried the following code - <img src={require('../public/images/icon.png').default} /> The image "icon.png" is stored in my public folder, and I&apos ...

I'm having trouble figuring out how to properly paginate data from Firebase without running into errors. Can

Here is the code I have written: <nav v-if="(tasks.length >= 7)" aria-label="Page navigation example"> <ul class="pagination fw-bold justify-content-center"> <li class="page-item"> ...

After running a yarn build on a TypeScript project using a .projenrc.js file, make sure to include any packaged or additional text files in the lib folder, rather

After utilizing projen to create my typescript project, I followed these steps: mkdir my-project, git init, and npx projen new typescript. Additionally, I created two files - sample.txt and sample.js, along with the default file index.ts within the folder ...

Change number-type object fields to string representation

I am in the process of creating a function that takes an object as input and converts all number fields within that object to strings. My goal is for TypeScript to accurately infer the resulting object's fields and types, while also handling nested st ...

Passing data between Vue.js components effortlessly without relying on events

At the moment, I am utilizing Laravel Nova. It's worth noting that it operates using vue.js. I've created a personalized vue component which requires the ability to modify data inside another component. This specific component is located in the ...

Display the total number of filtered data outputs in ngFor using a pipe in Angular 2

I'm currently working on a project where I need to calculate the total sum of values from my JSON objects based on a filter applied through a custom pipe. While I've managed to filter the numbers by their respective object names, I'm struggl ...

Responsive mode causing navbar to break

After creating my web portfolio, I encountered an issue when viewing it on my phone. The navbar collapses but is not properly aligned and there is extra space on the right side of the viewport in the hero section that I can't seem to fix. Portfolio L ...

Is it necessary to use `top` or `parent` when utilizing local scripts in an iFrame?

Is it possible to eliminate the use of top or parent in iFrame localized scripts, as the title suggests? Upon examining the screenshot below, I encounter a "not defined" error unless I include top or parent as a prefix to my function call. test(); does n ...

Sending an AJAX request to a REST service in order to submit the information captured in an HTML form

<html> <body> <form method="POST"> <label>username</lable> <input id="username" name="username" type="text"> <label>emailid</lable> <input id="emailid" ...

Having trouble running ng e2e on TeamCity with an @angular/cli script that refuses to cooperate

While using TeamCity 10, I encountered an issue with running an @angular/cli project during a build step. Everything worked smoothly until the e2e script was executed, causing the build to halt and require a forced shutdown. To troubleshoot, I accessed my ...

Tips for excluding test files in next.js when building

I am currently developing a next.js application with tests integrated within the page directory structure. In order to achieve this, I have made necessary configurations in the next.config.js file. const { i18n } = require('./next-i18next.config' ...

How can you utilize a variable as 'othername' instead of 'var' using const in Javascript or Typescript?

Is there a better way to achieve the following: const { colors as ThemeColors } = useTheme(); I'm trying to avoid doing it like this: const { colors } = useTheme(); const ThemeColors = colors; If you have any suggestions, please let me know. Thanks! ...

Achieving nested routes without the need for nested templates

My Ember routes are structured like this: App.Router.map(function() { this.resource("subreddit", { path: "/r/:subreddit_id" }, function() { this.resource('link', { path: '/:link_id'} ); }); }); However, ...

Populating a ListBox without the need to constantly scroll upwards

I'm currently facing an issue with a ListBox that displays online users fetched from a MySQL database. Every second, the ListBox is updated with new users. The problem arises when adding an item to the ListBox causes it to scroll up, which I want to a ...

Is there a way to streamline the form completion process on my website by utilizing voice commands through the user's microphone?

My webpage features a web form using Flask where users manually input their information that is then added to a table upon submitting. The current setup involves an autoplay video prompting users with questions, which they answer manually and then submit t ...

Issue with Typescript npm script including compilation and nodemon issue

After exploring various SO links, I tried to find a way to simultaneously run both tsc -w and nodemon app.js using a single command. The link I referred to is: How do I execute typescript watch and running server at the same time? Working on a node.js pr ...

Setting the default <a-sky> in Aframe: A step-by-step guide

There was a fascinating projection I witnessed where two images were displayed in the sky. [https://codepen.io/captDaylight/full/PNaVmR/][code] Upon opening it, you are greeted with two spheres and a default white background. As you move your cursor over ...

A guide on extracting information from a personal Flask JSON route endpoint with Axios

I am looking to store JSON data in a variable using Axios in Javascript. The JSON endpoint is generated by my own server's route http://123.4.5.6:7890/json. I have been successful with this function: async function getClasses() { const res = await ...

The sporadic nature of inline-block elements' behavior when generated through JavaScript

I have multiple identical div elements with their display property set to inline-block. I am aware that by default, inline-block elements come with some margin around them, so I expect to see some empty space surrounding these elements (I am not looking to ...