Angular 2 How to bind the checkbox dynamically and return checked checkbox id's when Submit button is clicked

Question

I have a JSON data like I shown below,

[  
         {  
            "id":1,
            "applicationId":1,
            "permissions":"Edit"
         },
         {  
            "id":2,
            "applicationId":1,
            "permissions":"View"
         }
]

Now I need to bind the checkbox dynamically for the data "permissions" and there is a button in HTML to Submit and when I click on Submit button, I need all the applicationId's which are checked in an array.

How can I achieve this in Angular?

Check this:coryrylan.com/blog/creating-a-dynamic-checkbox-list-in-angular — Chellappan வ
– Chellappan வ, Commented Jan 18, 2019 at 13:21

profanis · Accepted Answer · 2019-01-18 13:53:00Z

I guess that you need to have as many checkboxs as the length of the array.

You can iterate the list with an ngFor and keep the state of the selected items in a separate array.

  checked = [];

  data = [  
         {  
            "id":1,
            "applicationId":1,
            "permissions":"Edit"
         },
         {  
            "id":2,
            "applicationId":1,
            "permissions":"View"
         }
  ];

  checkItem(item) {
    const idx = this.checked.indexOf(item);
    idx >= 0 ? this.checked.splice(idx, 1) : this.checked.push(item);
  }

  submitData() {
    const applicationIds = this.checked.map(it => it.applicationId);
    console.log(applicationIds);
  }

and the template to be something like

<ul>
  <li *ngFor="let item of data">
    {{item.permissions}} <input type="checkbox" (change)="checkItem(item)">
  </li>
</ul>

<button type="button" (click)="submitData()">Submit</button>

Collectives™ on Stack Overflow

Angular 2 How to bind the checkbox dynamically and return checked checkbox id's when Submit button is clicked

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related