Javascript – Sending multiple queryParams in Angular search

I am having trouble with creating a search for the data I get from an API… the data is displayed in an Angular Material table. I have 8 inputs that can be used as a filter.

How could I append one or more searched terms to the api url that would then show just the filtered results?

Here is the code I have so far and is giving me the error:

src/app/services/customers.service.ts:23:53 – error TS2339: Property
‘name’ does not exist on type ‘[]’.
23 queryParams = queryParams.append("name", filter.name);

customers.service.ts

  getAllCustomersList(currentPage: number, filter: []) {

    let queryParams = new HttpParams();
    queryParams = queryParams.append("page", currentPage);
    queryParams = queryParams.append("name", filter.name);

    return this.httpClient.get<Customers>(`${environment.apiUrl}customers`,{params:queryParams});
  }

customers.component.ts

      loadData(filter:[]) {
    
        this.isLoading = true;
    
          this.customerSubscription = this.customersServcice.getAllCustomersList(this.currentPage,filter).subscribe(
              data => {
                this.dataSource.data = data["_embedded"]["customers"];
                setTimeout(() => {
                  this.paginator.pageIndex = this.currentPage;
                  this.paginator.length = data.total_items;
                });
                this.isLoading = false;
              });
      }

      filterChanged(event: any) {
        console.log('Searched value = ' + event.target.value);
        const searchTerm = event.target.value;
    
        this.currentPage = 1;
        this.loadData([])

     }

customers.ts

export interface CustomerItem {
  customer_id: number;
  company_id: number;
  name:  string;
  name2: string;
  address: string;
  post_code: number;
  city: string;
  country_code: string;
  country_name: string;
  phone: string;
  email: string;
  account: string;
  mailing: string;
  sso: string;
  is_customer: string;
  is_vendor: string;
  vat_liable: string;
  vat_number: string
  date_update: string;
  tags: string;
  _links: {
    self: {
      href: string;
    }
  }
}
export interface Customers {
  _links: {
    first: {
      href: string;
    };
    last: {
      href: string;
    };
    next: {
      href: string;
    }
    self: {
      href: string;
    };
  };
  _embedded: {
    customers: CustomerItem[]
  };
  page: number;
  page_count: number;
  page_size: number;
  total_items: number;
}

And here is the html customers.component.html

    <mat-toolbar class="crm-filters-toolbar mat-elevation-z8">
      <mat-toolbar-row>
        <span>Filter</span>
      </mat-toolbar-row>
      <mat-toolbar-row>
        <mat-form-field appearance="outline">
          <mat-label>Name, email...</mat-label>
          <input matInput (keyup)="filterChanged($event)" placeholder="Name, email...">
        </mat-form-field>
        <mat-form-field appearance="outline">
          <mat-label>Customer ID</mat-label>
          <input matInput (keyup)="filterChanged($event)" placeholder="Company ID">
        </mat-form-field>
        <mat-form-field appearance="outline">
          <mat-label>VAT</mat-label>
          <input matInput (keyup)="filterChanged($event)" placeholder="VAT">
        </mat-form-field>
        <mat-form-field appearance="outline">
          <mat-label>Database</mat-label>
          <input matInput (keyup)="filterChanged($event)" placeholder="Database">
        </mat-form-field>
        <mat-form-field appearance="outline">
          <mat-label>Country</mat-label>
          <input matInput (keyup)="filterChanged($event)" placeholder="Country">
        </mat-form-field>
        <mat-form-field appearance="outline">
          <mat-label>Source</mat-label>
          <input matInput (keyup)="filterChanged($event)" placeholder="Source">
        </mat-form-field>
      </mat-toolbar-row>
    </mat-toolbar>
    <div class="table-container">
      <table mat-table [dataSource]="dataSource"> 
table rows and columns...
      </table>
    </div>