I am currently working on a project that involves displaying data in a table. I want to add a search bar functionality that allows users to filter the table data. I have attempted to use a pipe to achieve this, but I am facing challenges and unsure of the correct approach.
The data in the table is sourced from a local json file stored in the assets folder. The table structure is defined in the app.component.html file.
I have already created a pipe for filtering, but I am stuck on writing the necessary code inside it.
Here is a basic example of what I am trying to achieve, where the data is displayed in a table sourced from a local file:
https://stackblitz.com/edit/angular-5ujgcy
Here is the code snippet I have so far:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'countrysearch'
})
export class CountrysearchPipe implements PipeTransform {
transform(Country: any[], searchText: string): any[] {
if(!Country) return [];
if(!searchText) return Country;
searchText = searchText.toLowerCase();
return Country.filter( it => {
return it.toLowerCase().includes(searchText);
});
}
}
//html
<input [(ngModel)]="searchText" placeholder="Enter search text">
<ul>
<li *ngFor="let country of Countries | filter : searchText">
{{countries.Name}}
</li>
</ul>
<table border="1">
<!-- ADD HEADERS -->
<tr>
<th>>Name</th>
<th>People</th>
<tr *ngFor="let country of Countries ">
<td>{{ country.Name }}</td>
<td>{{ country.People }}</td>
</tr>
</table>