Take a look at my table view below. Each column has its own search function.
My current issue is that when I type in one column, the same text appears in other columns as well. To solve this problem, I have implemented the following code:
<tr>
<th *ngFor="let head of headElements; let i = index" scope="col">
<h5 class="text-color">{{head}}</h5>
<div class="md-form mb-0">
<input [(ngModel)]="searchText[i]" type="text" class="form-control"
id="search_{{i}}" mdbInput />
<label for="search_{{i}}">Search</label>
</div>
</th>
</tr>
By using [(ngModel)]="searchText[i]" or [(ngModel)]="searchText[head]", I can input different text into different boxes.
However, I am having trouble accessing the typed text in the filter: searchText;
Here is my code for viewing the table data:
<tbody>
<tr *ngFor="let el of elements | filter : searchText; let i = index" mdbWavesEffect>
<td class="p-2" *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex"
scope="row">{{el.firstName}} {{el.middleName}} {{el.lastName}}</td>
<td class="p-2" *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">
{{el.mobileNumber}}</td>
<td class="p-2" *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">
{{el.joiningYear}}</td>
<td class="p-2" *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">
{{el.emailId}}</td>
<td class="p-2" *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">
{{el.designation}}</td>
</tr>
</tbody>
In addition to this, I have declared searchText: any = []; in the component.ts file to avoid any undefined errors.
Lastly, here is my filter pipe code:
if (!employees || !searchTerm) {
return employees;
}
return employees.filter(employee =>
employee.mobileNumber.toLowerCase().indexOf(searchTerm) !== -1);
}