I'm currently facing an issue with setting up a search functionality for the data obtained from an API. The data is being displayed in an Angular Material table, and I have 8 different inputs that serve as filters.
Is there a way to add one or more search terms to the API URL in order to display only the filtered results?
Below is the code snippet I've written so far which is throwing an 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;
}
Here's the HTML code from 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>
<!-- Other filter fields go here -->
</mat-toolbar-row>
</mat-toolbar>
<div class="table-container">
<table mat-table [dataSource]="dataSource">
table rows and columns...
</table>
</div>