I want while typing a word, to have items listed with just that word in the title or header. This my method don’t return anything. What shuold i do?
This is my html
<input type="text" (change)="component.performFilter($event)"/>
<div *ngFor="let report of component?.reports" class="pr-5 pt-2" style="width: 350px;">
<h3>{{report.header | translate}}</h3>
<ul class="list-unstyled pl-1">
<li *ngFor="let item of report.items">
<i class="fa {{item.icon}} mr-h"></i>
<a class="link" [routerLink]="item.path"> {{item.title}} </a>
<p *ngIf="item.description" class="text-muted">{{item.description}}</p>
</li>
</ul>
</div>
This is my TS
protected reports: Array<ReportItemsModel> = [];
protected filteredReports = [];
_listFilter: string = '';
get listFilter(): string {
return this._listFilter;
}
set listFilter(value: string) {
this._listFilter = value;
this.filteredReports = this.performFilter(value);
}
constructor(
protected route: ActivatedRoute,
protected httpService: HttpService
) {
super(route);
this.titleIcon = 'fa-bar-chart';
this.titleSufixKey = 'reports';
}
performFilter(filterBy: any) {
filterBy = filterBy.target.value;
return this.reports.filter((report) =>
report.header.toLocaleLowerCase().includes(filterBy)
);
}