Angular 7 multiple query string, how to

Question

I have an asp.net method that accepts a list of items as a parameter. The function works and has been tested. Now this method is being consumed by Angular. My question is, how can I successfully pass multiple parameters from within Angular?

Essentially, I'm trying to achieve this:

localhost:4200/download?item=fname&item=lname&item=cc

The values are being passed from Angular material design check boxes.

Asp.Net Core

[HttpGet("downloadbooks")]
public IActionResult Download(IList<string> item)
{
  //omitted for simplicity
}

Angular Service

downloadfunction(item: any = []){
  return this.http.get(url + `books/downloadbooks?item=${item}`,  { headers: new HttpHeaders({'Content-Type': 'application/json',
      }), responseType: 'blob'}
    );
}

Angular TS

fname;
fnameChecked = false;

lname;
lnameChecked = false;

cc;
ccChecked = false;


  onfnameChecked() {
    this.fname= ""
    if (this.fnameChecked) {
      this.fname = "fName"
    }
  }

  onlnameChecked() {
    this.lname= ""
    if (this.lnameChecked) {
      this.lname = "lName"
    }
  }

 onccChecked() {
    this.cc= ""
    if (this.ccChecked) {
      this.cc= "cc"
    }
  }

downloadBooks(){

//I want to pass multiple parameters within the dowloadfunction()
//only one parameter is passed at the moment.

 this.downloadService.downloadfunction(this.fname).subscribe(blob => {
 link.href= window.URL.createObjectURL(blob);
})
}

Angular html

    <mat-checkbox class="example-margin" name="fnameChecked" [(ngModel)]="fnameChecked" [checked]="fnameChecked" (change)="onfnameChecked()">First name</mat-checkbox>

    <br />
    <mat-checkbox class="example-margin" name="lnameChecked" [(ngModel)]=" lnameChecked " [checked]=" lnameChecked " (change)="onlnameChecked()">Last Name </mat-checkbox>
    <br />
<mat-checkbox class="example-margin" name="ccChecked" [(ngModel)]="ccChecked " [checked]=" ccChecked " (change)="onccChecked()">Credit card</mat-checkbox>

  <button mat-raised-button [mat-dialog-close]="" color="primary" (click)="downloadBooks()"><a [target]="'_blank'">Submit</a></button>

Answer 1

You may use HttpParams to achieve that.

const item = [fname, lname, cc];
const options = {
  headers: new HttpHeaders({'Content-Type': 'application/json'}),
  params: new HttpParams().set('item', JSON.stringify(item))
};

this.http.get(url, options)

Answer 2

There are 2 ways you can use HttpParams

Option 1

using set (i.e. overwrite)

?item=fname,lname,cc

const items = [fname, lname, cc];

this.http.get(url, { params: new HttpParams().set('item', items) })

Option 2

using append (by reassigning the params variable because HttpParams is immutable)

?item=fname&item=lname&item=cc

const items = [fname, lname, cc];

let params = new HttpParams();
items.forEach(i => (params = params.append('item', i)))
this.http.get(url, { params });