Question: Why is the event only capturing the first letter of the input form?
Background: In an input form, users can type a string but the method I created to handle the event is only recognizing the first letter entered. For example, if someone types "hello," the event handler fires in this order 'h' 'e' 'l' 'l' 'o'
I have attempted to capture the value and push it to an array, but I have not been successful in achieving the desired result.
Intended outcome: My goal is to dynamically store the letters in an array within the method so that if a user deletes a character, it would be reflected in the array.
The template
<mat-form-field appearance="outline" class="name-search">
<mat-label>Search Stands</mat-label>
<button mat-icon-button matSuffix>
<mat-icon>search</mat-icon>
</button>
<input matInput type="text" (input)="onSearchTextChanged($event)" />
</mat-form-field>
The logic
export interface Filter {
query: string
groupBy: GroupBy
}
interface GroupBy {
field: string
value: string
}
@Component({
selector: 'app-searchbar',
templateUrl: './searchbar.component.html',
styleUrls: ['./searchbar.component.sass'],
})
export class SearchbarComponent implements OnInit {
@Output() searchTextChanged: EventEmitter<Filter> = new EventEmitter()
filter = {
query: '',
groupBy: { field: 'status', value: this.statusGroupBy },
}
constructor() {}
ngOnInit(): void {}
onSearchTextChanged(event) {
const { data } = event
const filter: Filter = {
...this.filter,
query: data,
}
this.searchTextChanged.emit(filter)
}
}