1

I am setting an input field to a variable I am defining, this is used to filter through my table on the front-end. It does not want to return any values unless a key is entered within the input field. How can I get the filter to work without the input field expecting back a key event. I want it to return values immediately when the 'filteredValue' is assigned.

HTML

<mat-form-field appearance="outline" *ngIf="filteredValue">
  <mat-label>Filter 1</mat-label>
  <input matInput 
         type="text" 
         (input)="doFilter($event.target.value)" 
         placeholder="Ex. BMW" 
         value="{{filteredValue | lowercase }}">
</mat-form-field>

component.ts

ngOnInit() {
  if (this.urlMM) {
    this.filteredValue = this.urlMM + ' ' + this.urlMake + ' ' + this.urlYear;
  }
}

public doFilter = (value: string) => {
  this.dataSource.filter = value.trim().toLowerCase();
}
Aleksey Solovey
  • 4,153
  • 3
  • 15
  • 34
Fayyaadh Karolia
  • 19
  • 1
  • 5
  • So you want your value as soon as you type something in your input field? If so you should check the answer of the user 'Saga' on here https://stackoverflow.com/questions/35359358/angular-2-change-event-on-every-keypress – internethulk Sep 30 '20 at 15:05
  • I am already assigning a value to the input field. But the filter only returns values when I edit the textbox. I want the values to be filtered as soon as the page loads. – Fayyaadh Karolia Sep 30 '20 at 17:01

1 Answers1

0
  • You can use keypress

doFilter(filterKety) {
console.log(filterKey)
if(filterKey.length > 2){
// your logic

} 
}
<mat-form-field appearance="outline" *ngIf="filteredValue">
  <mat-label>Filter 1</mat-label>
  <input matInput 
         type="text" 
         (keypress)="doFilter($event.target.value)" 
         placeholder="Ex. BMW" 
         value="{{filteredValue | lowercase }}">
</mat-form-field>
MahanteshGowda Patil
  • 121
  • 7
  • This still does not provide the desired solution. When the page loads the input field already has a value assigned ("filteredValue"). I want this value to filter through the table as soon as the data is returned within the table. – Fayyaadh Karolia Sep 30 '20 at 17:09