I have created a search function along with a list and filter feature.
Check out my search bar with the filter function:
<div>
<mat-form-field class="example-full-width">
<input matInput #message maxlength="256"
placeholder="Search for a vehicle" (input)='filter(message.value)' >
<mat-hint align="start"><strong>Find a vehicle</strong> </mat-hint>
<mat-hint align="end">{{message.value.length}} / 256</mat-hint>
</mat-form-field>
</div>
This is the list I have:
<div>
<mat-nav-list>
<mat-list-item *ngFor="let stuff of vehicleDetails">
<a matLine> {{ stuff.name }} </a>
<button mat-icon-button id="btn" (mouseover)="showInfo(stuff)">
<mat-icon>info</mat-icon>
</button>
</mat-list-item>
</mat-nav-list>
</div>
Both of these are part of the same .html file and share a component.ts file. The list is populated by calling getVehicleDetails() in ngOnInit.
export class VehiclelistComponent implements OnInit {
vehicleDetails: VehicleDetail[] = [];
constructor(private vehicleService: VehicleService) { }
ngOnInit() {
this.getVehicleDetails();
}
getVehicleDetails(): void {
this.vehicleService.getVehicleDetails()
.subscribe(vehicleDetails => {
this.vehicleDetails = vehicleDetails;
});
}
Here is the filtering function I am using:
filter(searchToken: string) {
if (searchToken == null) {
searchToken = '';
}
searchToken = searchToken.toLowerCase();
return this.vehicleDetails.filter((elem: VehicleDetail) =>
elem.name.toLowerCase().indexOf(searchToken) > -1);
}
I'm having issues with the filter function as it doesn't seem to be affecting my list. Any suggestions on how to fix this?