After attempting to filter a list of titles using Ng2SearchPipeModule, I imported the module in app.module.ts and created a new searchbar component.
searchbar.component.ts
import { FirebaseService } from './../../firebase.service';
import { AngularFirestore } from '@angular/fire/firestore';
import { Component, OnInit} from '@angular/core';
@Component({
selector: 'app-searchbar',
templateUrl: './searchbar.component.html',
styleUrls: ['./searchbar.component.css']
})
export class SearchbarComponent implements OnInit{
constructor(private fireService:FirebaseService){}
titles:Array<any>;
InputText:string;
ngOnInit(){
this.gettitles();
}
gettitles(){
this.fireService.read_titles().subscribe(result =>{
this.titles = result;
console.log(this.titles);
})
}
}
My searchbar.component.html contains the following code
<div class="search-field">
<mat-form-field>
<mat-label>Search</mat-label>
<input id="input" type="text" matInput placeholder="" autocomplete="off" [(ngModel)]=InputText>
<div><i class="fas fa-search"></i></div>
</mat-form-field>
</div>
<div class="SearchTitles">
<tbody>
<tr *ngFor="let title of titles | filter:InputText">
<td>{{title.payload.doc.data().title}}</td>
</tr>
</tbody>
</div>
Although I am receiving the correct output from Firebase Firestore, I am encountering an error each time I type a character into the input field, and the filtering is not happening.
This error seems to be related to the filter module. I have been unable to find any information on how to resolve this issue...
Thank you for your assistance