Skip to content

How to join values in comma seprated string on checkbox checked Angular 8

I am passing values on checkbox chnages event in api.

I want to pass comma seprated values in URL on checkbox change like below example.


and remove values on checkbox unchecked event like below example code=ABC,DEF

Can any one help me to do this.

Below is my code

onChange(event, Code) {
    if (event.checked) {
      this.newCode = Code;
    } else {
      this.newCode = '';


Simple solution could be.

in component.ts file

code: string;
selectedValues = [];
selectCheckBox(evt, val) {
  const status =;
  if (status) {
  } else {
    this.selectedValues = this.selectedValues.filter((v) => v!==val)
  this.code = this.selectedValues.join(',')
onSubmit() {
  let url = '';
  url = `${url}/&code=${this.code}`;
  // write you logic call api etc

In template

  <li><input type="checkbox" name="chbx1" value="AB" (change)="selectCheckBox($event, 'AB')"></li>
  <li><input type="checkbox" name="chbx2" value="CD" (change)="selectCheckBox($event, 'BC')"></li>
  <li><input type="checkbox" name="chbx3" value="ED" (change)="selectCheckBox($event, 'CD')"></li>
<button type="button" (click)="onSubmit()">Submit</button>

Working DEMO

Hope this solve your issue.