Using @Output EventEmitter to Hide Search Suggestions in Angular for Susper Web App
Problem: In Susper the suggestions box doesn’t hide when there are no suggestions. To fix this, we have used @Output to create interaction between the search bar and suggestions box.
Susper gives suggestions to the user when user types a query. These suggestions are retrieved from the suggest.json endpoint from Yacy server.
We have a separate component for searching a query and a separate component for showing suggestions (auto-complete.component.ts). The architectural link between the query box, suggestion box and the results page is a bit complicated.
The search bar and the auto-complete component doesn’t interact directly. Whenever a new query is entered, the search bar triggers an action with a payload including the query. On receiving the new query, auto-complete component calls Yacy server to get suggestions from the endpoint and display them inside the suggestion box. Whenever a user searches making a new query, the search bar implementation opens the suggestion box even if there are no results. So there should be a way to inform search bar component that suggestions box has received empty results and search bar could hide the suggestions box.
To achieve this we used @Output to emit an event
@Output() hidecomponent: EventEmitter<any> = new EventEmitter<any>();
autocomplete.component.ts:-
this.autocompleteservice.getsearchresults(query).subscribe(res => { if (res) { if (res[0]) { this.results = res[1]; if (this.results.length === 0) { this.hidecomponent.emit(1); } else { this.hidecomponent.emit(0); } }
Then in search bar component, this is binded to a function hidesuggestions() which takes care of hiding the suggestion box.
searchbar.component.html
<app-auto-complete (hidecomponent)="hidesuggestions($event)" id="auto-box" [hidden]="!ShowAuto()"></app-auto-complete>
searchbar.component.ts
hidesuggestions(data: number) { if (data === 1) { this.displayStatus = 'hidebox'; } else { this.displayStatus = 'showbox'; } } ShowAuto() { return (this.displayStatus === 'showbox'); }
Here you could see that the auto-complete component’s hidden attribute in searchbar.component.ts is binded with ShowAuto() function which takes care about the interaction and hides the suggestions box whenever there are no results.
Below a GIF shows how this suggestions feature is working on Susper
Source code related to this implementation is available at this pull
References:
- Interaction between components in Angular: https://angular.io/guide/component-interaction
You must be logged in to post a comment.