Angular 2 - Managing the status of checkboxes in a list of checkboxes

Question

Angular 2 - Managing the status of checkboxes in a list of checkboxes

I recently started using Angular 2 with Typescript and I am working on creating a list of checkboxes to manage their states.

Similar to how some shopping websites function, the checkboxes represent different companies. Users can select multiple checkboxes and then press a search button to display products from those selected companies.

<ul class="companies">
    <li *ngFor="let company of companies">
        <input type="checkbox">{{ companies.name }}
    </li>
</ul>

The "companies" array is retrieved from the database, where each company has an id and a name. Using *ngFor allows us to repeat the li element for each company in the array, displaying a checkbox next to the company name.

Without assigning individual ids to each checkbox, it becomes challenging to track their states. Any guidance on how to accomplish this would be greatly appreciated.

angular typescript checkbox

Answer 1

Answer №1

If you are utilizing a mat-checkbox, you can make use of the

@Output() change: EventEmitter<MatCheckboxChange>

event to trigger a method whenever the value state changes. Here is an example of how this can be implemented:

<ul class="companies">
    <li *ngFor="let company of companies">
        <mat-checkbox (change)="onCheckboxStateChange($event, company.id);">{{ companies.name }}</mat-checkbox>
    </li>
</ul>

You will then need to have a method called

onCheckboxStateChange(changeEvent: MatCheckboxChange, id: number)

in your TypeScript class to handle the checkbox event. The changeEvent object includes a property named checked, which can be used as shown below:

public onCheckboxStateChange(changeEvent: MatCheckboxChange, id: number) {
    const index = this.companies.findIndex(x => x.id === id);

    if (index === -1) {
        console.warn("Company not found");
        return;
    }

    companies[index].checked = changeEvent.checked;
}

Answer 2

If you are utilizing a mat-checkbox, you can make use of the

@Output() change: EventEmitter<MatCheckboxChange>

event to trigger a method whenever the value state changes. Here is an example of how this can be implemented:

<ul class="companies">
    <li *ngFor="let company of companies">
        <mat-checkbox (change)="onCheckboxStateChange($event, company.id);">{{ companies.name }}</mat-checkbox>
    </li>
</ul>

You will then need to have a method called

onCheckboxStateChange(changeEvent: MatCheckboxChange, id: number)

in your TypeScript class to handle the checkbox event. The changeEvent object includes a property named checked, which can be used as shown below:

public onCheckboxStateChange(changeEvent: MatCheckboxChange, id: number) {
    const index = this.companies.findIndex(x => x.id === id);

    if (index === -1) {
        console.warn("Company not found");
        return;
    }

    companies[index].checked = changeEvent.checked;
}

Angular 2 - Managing the status of checkboxes in a list of checkboxes

Answer №1

Similar questions

Installing and running Node.js within a tomcat server

Developing a Liferay 7.0 portlet using Angular and TypeScript

Tips for placing a marker at the center of the screen on Google Maps

React typescript is handling various promise response types, causing strange behavior in type-checking

The type 'true | CallableFunction' does not have any callable constituents

Issue with a child element that is malfunctioning because of the parent element

Unable to locate the reference for 'bootstrap'

How to detect a change in the value of a formControl during each focusout event in Angular 6?

Tips for providing certificate key file during the deployment of a cloud function?

What are the potential reasons behind an Uncaught TypeError arising from an Object Prototype in the AOT build, but not in the development environment?

The data type 'Observable<{}[]>' cannot be matched with the type 'AngularFireList<any>'

Taking in user inputs using Angular 8 reactive forms

Show a roster of individuals by inputting values that will populate the list with their names

The error occurred in Commands.ts for Cypress, stating that the argument '"login"' cannot be assigned to the parameter of type 'keyof Chainable<any>))`

Angular Command Line Interface version 12.2.0 displays the message: "No overload matches this call."

Disabling lint in a PhpStorm or WebStorm project with angular-cli

Setting the default value for a useRef<HTMLInputElement> in ReactJs with Typescript

What is preventing you from utilizing TypeScript's abstract classes for generating React factories, especially when regular classes seem to function properly?

Issue encountered with express-jwt and express-graphql: TypeScript error TS2339 - The 'user' property is not found on the 'Request' type

Step-by-step guide to designing a leaflet map using Angular Formly