How to get all checkboxes values in Angular (10+)?

Question

I retrieve from the database what options should I show for all companies (only for showing purposes), this is my model:

 export class OpcionesModel {
        name: string;
        isActive: boolean;
        id?: string;
        
 }

Then, I show all the options that are available (active):

<div class="row" *ngFor="let option of optionsArray; let i=index">
        <div class="col-4">
            <h5>{{option.name | titlecase}}</h5>
          
        </div>
        <div class="col">
            <input type="checkbox">

        </div>
        
    </div>

What I want to do is to get all option's names and if its checkbox is checked or not and store that in an array, eg:

[{'option 1', true}, {'option 2'}, false}, {'option 3', false}...].

EDIT: I've created an array: checkes: boolean[] =[];

if I do this <input type="checkbox" [(ngModel)]="checkes[i]"> , I can get the checkboxes value but I need the option name too.

Thanks !!

Answer 1

<label>
    <input type="checkbox" name="isActive"  [(ngModel)]="option.isActive">
    {{ option.name }}
</label>

taken from here: https://scotch.io/tutorials/how-to-deal-with-different-form-controls-in-angular-2

In your ts file, Your optionsArray array will be binded and the checked values will be updated when it changes

If you want to map it to an array with a different structure you can use the map method:

this.optionsArray.map(oa=> {return { myOptionName:oa.name, active:oa.isActive} })