How can I make it so that only the checked checkboxes can be toggled in an ngFor loop using Angular 8?

<div id="col-container">
    <mat-card id="profile-card" *ngFor="let candidate of obj_users; let i = index;  ">
        <img class=" candidates-image" mat-card-image src="{{candidate.photo }}" />
        <mat-card-content>
            <h3 style="margin-bottom: 8px;"> {{ candidate.firstname }}
                {{ candidate.lastname}} </h3>
            <!-- <p *ngIf=""> PRESIDENT </p> -->
            <p> {{ candidate.position_id }} </p>
            <mat-divider [inset]="true"></mat-divider>
            <p> {{ candidate.platform }}</p>
            <p> {{ candidate.nation }}</p>
            <label class="switch">
                <input [disabled]="disabledButton" (change)="OnChange($event , i)" id="checkbox" type="checkbox">
                <span matRipple id="purecbx">VOTE</span>
            </label>
        </mat-card-content>
    </mat-card>
</div>
angulartypescript

Answer №1

In order to ensure that each candidate has a disabledButton property in the obj_users object, you will need to add this property. This way, you can easily manage and disable buttons for each candidate separately.

<label class="switch">
       <input [disabled]="candidate.disabledButton" (change)="OnChange($event , i)" id="checkbox" type="checkbox">
       <span matRipple id="purecbx">VOTE</span>
</label>

To enable the checkbox, simply set the disableButton property at the specified index of obj_users to false. This will allow users to freely check and uncheck the checkbox.

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

The 'Subscription' type does not contain the properties: source, operator, lift, subscribe, and three other properties that are present in the 'Observable<EnumValue[]>' type

Are you struggling with assigning an Observable<EnumValue[]> to another Observable<EnumValue[]>? fetchContactLocationStates() { this.contactLocationStates$ = this.enumValues$ .pipe(takeUntil(this.destroy$)) .subscribe(x => x.fil ...

angulartypescriptrxjsrxjs-observables

What is the best way to personalize the appearance of an Angular Material Input?

I'm currently collaborating with a freelance client who is keen on incorporating Angular Material into our project. However, they are not satisfied with the appearance of the underline in the angular material input field. Despite my efforts to modify ...

cssangularangular-material2

What exactly does ".default" signify in Angular, Typescript, or Javascript?

Could someone please clarify the significance of the ".default" in the code snippet below? I am interested in implementing this code in our project, but my understanding of the mentioned code fragment is uncertain. (I have modified my question to display ...

javascriptangulartypescript

What causes the npm ERR! code ELIFECYCLE error when the NPM run test command fails?

My Angular CI build is encountering a failure in NPM test task, as I am executing the npm run Test:sonar command in the CI environment. The package.json file contains the definition for test:sonar at the beginning with the following details: "test:sonar" ...

node.jsangularnpmangular-cliangular-test

Using Angular5 to extract coordinates from the Google Maps v3 API when a map "click" event occurs

Can anyone assist me with retrieving coordinates from a click event on a map? Here is the desired result: Link Below is the code I have so far: import { Component, OnInit } from '@angular/core'; import { ViewChild } from '@angular/core&ap ...

javascriptangulargoogle-mapstypescriptgoogle-maps-api-3

Retrieve parent form validation within a child component Angular 5 control value accessor

I found helpful information on this website: My goal is to implement validation for all fields in a child component using control value accessor and template driven forms. (For reference, here is the link to the issues on Stackblitz: https://stackblitz.c ...

angularformsform-controlngmodelcontrolvalueaccessor

The input of type 'Object' cannot be assigned to the specified 'Interface' parameter

fetchCurrenciesData(): currencyInterface[]{ let currencyArray: **any**[] = []; this.http .get(`${this.url}?from=${this.currency1}&to=${this.baseCurrency}&amount=1&places=2`) .subscribe(response => currencyArray.push(respo ...

angulartypescript

Encountering a problem with the mock object in Angular 11 unit testing when converting a JSON object to a TypeScript interface

Within my Angular 11 application, I am working with a JSON response and have defined an interface to match the structure of this JSON object. The JSON object looks like this: { "division": { "uid": "f5a10d90-60d6-4937-b917- ...

jsonangulartypescriptunit-testinginterface

What is the best way to efficiently test multiple requests in a pipeline using Angular?

Looking to test three requests made within a pipeline. Here's a simplified example: httpClient.get<Data[]>(testUrl) .pipe( mergeMap(() => range(0, 2)), mergeMap(() => httpClient.get<Data[]>(testUrl)), ...

angularunit-testingtestinghttptestingcontroller

Steps to create a clickable row with color change in Angular 4

How do I make an entire row clickable and change the row color when a checkbox is clicked? This is my HTML file: <section class="others"> <div class="sub-header">Others</div> <p class="text-center" *ngIf="otherTests.length === 0"> ...

javascripthtmlangulartypescript

Error in TypeScript not being caught in React due to incorrect type detection

Could you assist me in grasping the workings of TypeScript? I am currently trying to learn it but am struggling with understanding certain behaviors. Example 1: The issue lies in the type errors not being detected, please refer to the commented message wi ...

typescript

Using Typescript to pass inferred type to React's useCallback

Illustration: function useFunction(fn) { return fn; } type Data = { '/person': { person: any }, '/place': { place: any }, }; function useData<Path extends keyof Data>( path: Path, options: { callback?: (data: Data[ ...

javascripttypescript

Typescript Event Handling in React Select

I am facing an issue with my handleSelect function: const handlerSelectBank = (event: React.ChangeEvent<{ value: unknown }>) => { setState({ ...state, buttonDisabled: false, selectedBank: event }); }; Upon execution, I encountered ...

reactjstypescriptreact-select

Generate a placeholder payload for CdkDragDrop event

I am looking to perform unit testing on a method in angular using jest: drop(event: CdkDragDrop<string[]>) { if (event.previousContainer === event.container) { moveItemInArray(event.container.data, event.previousIndex, event.currentIndex) ...

angularjestjsjasmine

Issues with Angular route links not functioning correctly when using an Array of objects

After hard coding some routerLinks into my application and witnessing smooth functionality, I decided to explore a different approach: View: <ul class="list navbar-nav"></ul> Ts.file public links = [ { name: "Home&quo ...

javascriptangular

What is the process for loading precompiled Angular libraries as dynamic modules?

I am currently working on a project that utilizes an Angular workspace with multiple apps and libraries. One interesting aspect of our setup is that the libraries are loaded dynamically as plugins, meaning we do not know the complete set of plugins at comp ...

angularplugins

default folder location for core modules adjustment

While experimenting with module imports in TypeScript, I encountered an issue when trying to import a module using import { Component, OnInit } from '@angular/core';. The compiler was successfully finding the module in the node_modules folder. I ...

angularjstypescripttsconfig

Enhancing Code: Eliminate Duplicates from an Array

I have a code that removes duplicates from an array, but I believe it could be improved for better elegance. Any suggestions? Interface Definition export interface SomeClass { version: number, typeDescription: string } Test Data someClasses: SomeCla ...

javascripttypescript

What is the method for enabling imports from .ts files without file extensions?

While trying to open a Svelte project with TypeScript, I encountered an issue where all imports from .ts files were showing "Cannot resolve symbol" errors. https://i.stack.imgur.com/FCVxX.png The errors disappear when the .ts extension is added to the im ...

typescriptintellij-idea

Exploring Expression Wrapping in Angular/Typescript: Seeking clarification on the guidelines for knowing when and where it is necessary

Can someone please explain to me the concept of "expression wrapping" in TypeScript and when it is needed? For example, why are the parentheses used in <[Parent, (Children[])]>? If I define a tuple type and use it in the resolve method signatur ...

angulartypescripttuplesangular2-routing