Recently, we have implemented intelligence feature in Susper using SUSI chat API to provide users answer a question without going deeper in search results. When a user types “height of Trump”, it shows answer like this:
Problem which we faced after implementing the feature:
When a user was erasing a query or query field was empty, Susper was still showing the answer of the intelligence component like this:
The answer should not be displayed when a query is empty because the user is not asking any question. The answer was still displayed because it had received a response from SUSI API.
How did we solve the problem?
The problem was solved in two ways.
- By using if/else condition: We checked if the statement shown inside the component is similar to the if-and-else condition. If the condition is true, it should hide the component.
- Using [hidden] attribute method: The Angular 4 supports [hidden] attribute which acts as { display:none; } . [hidden] attribute generally works as ngShow and ngHide which was earlier supported by Angular 2.
We preferred both the methods to solve the problem. The intelligence component is being loaded inside results component using <app-intelligence> element. Further, we added [hidden] attribute to this element like this :
query: ‘ ‘,
rows: 10,
start: 0
};
if (this.searchdata.query === ‘ ‘) {// display: none; is true
this.hideIntelligence = true;
} else {
// display: none; is false
this.hideIntelligence = false;
}
Applying this solution, we succeeded in hiding the intelligence component. We would also had used *ngIf statement but we preferred using [hidden]. [hidden] modifies the display property. *ngIf is a structural directive which creates or destroys content inside DOM.
The source code for the implementation can be found here: https://github.com/fossasia/susper.com/pull/613
Resources:
- Structural directives in Angular 4: https://angular.io/guide/structural-directives
- Difference between *ngIf and [hidden]: https://stackoverflow.com/questions/43034758/what-is-the-difference-between-ngif-and-hidden