Get values of all selected Checkboxes using Angular

Question

Apologies if this EXACT question has been asked elsewhere as I've searched over the internet but I've found somewhat similar scenarios and their solutions but not one that I'm in search of. Hoping someone could assist me in this. So here goes,

I need to obtain the value of all the checkboxes that have been checked. The checkboxes are dynamically created based on the number of Array (assets) items

I am creating a form which uses ngFor to go through an array, and create checkboxes for each field. So what I've done is something like this,

    <form>
      <div class="row"><label>Assets</label></div>
      <div *ngFor='let asset of assets' [(ngModel)]='assets'>
        <div class="col-8"><input type="checkbox" name="{{asset}}" (change)="onChange()"></div>
        <div class="col-35"><label>{{asset}}</label></div>
      </div>
    </form>

There are plenty of solutions outside but unfortunately everyone is coming with an example where the array is more like a Key:Value pair, for instance,

    this.someArray = [
       {id:1, name: someName, isSelect: false},
       {id:2, name: someOtherName, isSelect: false}
    ]

I understand how to work with such kind of array structure but in my case, I have the following String Array,

    assets: String[] = ['one', 'two', 'three'];

My question is, how can I get all the values that have been checked when I have just a simple Array of Strings. What I've done uptil now is something like this, asset.component.html

    <form>
    <div class="row"><label>Assets</label></div>
    <div *ngFor='let asset of assets' [(ngModel)]='assets'>
    <div class="col-8"><input type="checkbox" name="{{asset}}" (change)="onChange()"></div>
    <div class="col-35"><label>{{asset}}</label></div>
    </div>
    </form>

asset.component.ts

    export class AppComponent  {
      name = 'Angular ' + VERSION.major;
    
      assets: String[] = ['one', 'two', 'three'];
      
      onChange(): void {
        alert(this.assets);
      }
    }

Any help will be greatly appreciated. Looking forward to hearing from you soon,

For references, here is the StackBlitz implementation (Not completed yet) though,

https://stackblitz.com/edit/angular-ivy-jtnzhp?file=src/app/app.component.html

Kind Regards

Are you using Angular Material checkbox or native checkbox input element as in the Stackblitz example? — NeNaD
– NeNaD, Commented Mar 18, 2022 at 3:33
I would recommend you to take a look at this angular.io/guide/reactive-forms#creating-dynamic-forms first, you could instead of the button for adding more just do it based on the data you want to add to the form. — Henrik Bøgelund Lavstsen
– Henrik Bøgelund Lavstsen, Commented Mar 18, 2022 at 3:33

NeNaD · Accepted Answer · 2022-03-18 03:50:44Z

4

You can do something like this:

HTML file:

<div *ngFor="let asset of assets">
  <input (change)="onChange(asset)" type="checkbox" value="{{ asset }}" />{{asset}}
</div>

TypeScript file:

assets: string[] = ['one', 'two', 'three'];
all_selected_values: string[] = [];

onChange(value: string): void {
  if (this.all_selected_values.includes(value)) {
    this.all_selected_values = this.all_selected_values.filter((item) => item !== value);
  } else {
    this.all_selected_values.push(value);
  }
  console.log(this.all_selected_values);
}

Working example

answered Mar 18, 2022 at 3:50

NeNaD

20.8k11 gold badges64 silver badges118 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

rac3b3nn0n Over a year ago

Brilliant!!! Didn't realise it was just this simple and amaed that I don't find this info in any of the online tutorials ... all work in a very set way, 2 dimensional arrays and simply use the key, value style working ... But hey, it worked like wonders. Thanks

Bry · Accepted Answer · 2022-03-18 03:34:01Z

0

Let's say you want to pass the property name of this.someArray, what you can do is something like this:

(change)="onChange(asset.name)"

answered Mar 18, 2022 at 3:34

Bry

259 bronze badges

Collectives™ on Stack Overflow

Get values of all selected Checkboxes using Angular

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related