Retrieve the current state of a mat-checkbox that is dynamically generated by clicking on its associated label

Trying to transfer the state of a dynamically generated checkbox to a method triggered by clicking the label.

Here's the HTML code:

<div *ngFor="let label of consent.labels" style="flex-direction: column">
  <div [ngClass]="{'accept': consent.aceptado === true, 'optional': !consent.obligatorio }">
    <section style="margin-top: 5px;">

      <mat-checkbox color="primary" [(ngModel)]="consent.aceptado" (change)="verify()">
        <div [innerHTML]="label.label | safeHtml" (click)="detailSubConsent(checkBoxState, $event)"></div>
      </mat-checkbox>

    </section>
  </div>
</div>

Furthermore, using event.preventDefault() prevents the checkbox state from changing when the label is clicked.

Is there a way to capture and pass the current state of the dynamically generated checkbox to the method triggered on click?

Answer №1

It's important to ensure that each checkbox is linked to a unique ngModel in order to avoid confusion. Creating a new object with keys for each label can help achieve this. If your label object type is undefined, you can assume each label has a unique Id and implement the solution accordingly.

   <div *ngFor="let label of consent.labels" style="flex-direction: column">    
      <mat-checkbox color="primary" [(ngModel)]="obj[label.id]">
    <div [innerHTML]="label.label | safeHtml" (click)="detailSubConsent(label.id, $event)"></div>

      </mat-checkbox>
    </div>


   detailSubConsent(id, $event){
   //access the state as shown below 
   this.obj[id]
   }

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 @Input default value is being replaced by `undefined` within the testing environment

Within my component, I have the following input: @Input() someThing: string = 'm'; // default value When testing, I defined it as follows: @Component({ selector: 'app-test-wrapper-component', template: ` <app-my-component so ...

What is the process for determining the overall cost of a column in Angular 9?

I am facing a challenge in calculating the total price, total quantity, and total counted(#) of each column in a table. | Item | Price | Quantity | 1 | Mouse | 500 | 1 | 2 | Wire | 100 | 2 | TI:3 | |TP:600 | TQ:3 | < ...

Access ViewChild and ViewContainerRef in Angular component generated dynamically

Is it possible to retrieve the ViewContainerRef from a dynamically created component? The dynamic component I have includes an ngContent element inside, which needs to be populated after creation. export class Example { @ViewChild('content', ...

What is the resolution if I need to utilize a property that is untyped?

Transitioning to TypeScript from plain old JavaScript is a step I'm taking because I believe it offers significant advantages. However, one drawback that has come to light is that not all attributes are typed, as I recently discovered. For instance: ...

TSLint has detected an error: the name 'Observable' has been shadowed

When I run tslint, I am encountering an error that was not present before. It reads as follows: ERROR: C:/...path..to../observable-debug-operator.ts[27, 13]: Shadowed name: 'Observable' I recently implemented a debug operator to my Observable b ...

requirements for ng-model

Can anyone assist me with ng-model? I have an input field where users can select values from an array called 'posters'. The selected value appears in the list. By default, the list displays 'The grand tour'. However, if a user enters a ...

Do changes in Input fields reflect in the parent component?

I was under the impression that I could share data with child components using @Input() directive and communicate data back to the parent component with @Output() along with the appropriate emit. However, I recently discovered that modifications made to th ...

Issues encountered while establishing a connection to an API in React Native

When attempting to log in a user by connecting to my API, I encountered some issues. It seems that every time my laptop has a different IP address, I need to make changes in the file where the fetch or XMLHttpRequest is located in order for the login proce ...

Extending Angular 2 functionality from a parent component

As a continuation of the discussion on Angular2 and class inheritance support here on SO, I have a question: Check out my plunckr example: http://plnkr.co/edit/ihdAJuUcyOj5Ze93BwIQ?p=preview Here is what I am attempting to achieve: I want to implement s ...

Tips for showcasing images stored in Azure Blob storage

Currently, I am developing an application that requires loading images from a web novel stored in Azure Storage Accounts as blobs. While I have enabled anonymous reads to show the image upon request successfully via a web browser or Postman, I am facing an ...

Troubles arise when compiling TypeScript to JavaScript

I have been experimenting with TypeScript, specifically for working with classes. However, I am facing an issue after compiling my TS file into JS. Below is the TypeScript code for my class (PartenaireTSModel.ts): export namespace Partenaires { export ...

Changing the order of a list in TypeScript according to a property called 'rank'

I am currently working on a function to rearrange a list based on their rank property. Let's consider the following example: (my object also contains other properties) var array=[ {id:1,rank:2}, {id:18,rank:1}, {id:53,rank:3}, {id:3,rank:5}, {id:19,r ...

Tips for removing the splash screen in Ionic 2

I've made changes to the config.xml file by setting the value of the splash screen to none. As a result, the splash screen no longer appears. However, I'm now encountering a white screen instead. Is there a way to prevent this white screen from a ...

How can models be aggregated in SQL by connecting them through other models?

I am working with a backend express API that utilizes sequelize. In my sequelize models, a Citizen is linked to a Street, which in turn is associated with a Town, and the Town is connected to a State. I can easily count the citizens on a specific Street by ...

Firestore - Insert new entries into an array in an existing document using Typescript

After retrieving data from Firestore using Firebase and implementing pagination function, I encounter an issue when attempting to add the new values to an array. Specifically, TypeScript raises an error message when I try to invoke the setState hook. int ...

Stop additional properties from being added to a typescript interface when converting JSON strings

Currently, I am developing an extension for Arduino on VSCode and facing an issue with a section of my code. To load the project's configuration, I am accessing a .json file located in the .vscode folder. While ideally, the user should not manually ed ...

Options are not being shown in the Mat-Select

I am currently working on an Angular application and encountering an issue with displaying options. When the page loads, the options are missing, and there is no error being thrown (nothing in the console). I even attempted a simpler version without connec ...

Having trouble with displaying Google Maps on your ionic/angular2 app?

I have integrated Google Maps using Ionic2, but when I run the code below, I am getting a blank page. export class NearByStoresPage { constructor(private nav: NavController, private confData: ConferenceData) { this.loadNearByOffers(); } loadNe ...

What steps do I need to take to resolve the issue with the coa npm library version 2.1

While working on my Angular project, I encountered an error in the console logs: Error: 404 Not Found - coa-2.1.3.tgz I have not listed this library in my package.json file and the latest version available is 2.0.2. I am unsure about what steps to take ...

Issues with loading Telerik UI in Nativescript with Angular 2

Even though I followed the installation guide closely at http://docs.telerik.com/devtools/nativescript-ui/getting-started, I seem to be having some issues. import { SIDEDRAWER_DIRECTIVES } from "nativescript-telerik-ui/sidedrawer/angular"; @NgModule({ ...