Hide and show html elements

src/app/pages/search/search.page.html

@@ -9,7 +9,7 @@
       <div class="input-text d-flex ion-align-items-center">
         <ion-input [(ngModel)]='searchSubject' class="search-input" type="search" placeholder="Pesquisar"></ion-input>
       </div>
-      <div class="icon">
+      <div class="icon" (click)="clearSearchInput()">
         <ion-icon name="restaurant-outline" src="assets/images/icons-search-close.svg"></ion-icon>
       </div>
     </div>
@@ -40,14 +40,14 @@
 
     </div>
 
-    <div class="d-flex">
+    <div class="d-flex ion-wrap word-searh-result-container">
       <!-- most searched word-->
-      <div class="most-searched-words">
-        <p>Palavas mais pesquisdas</p>
+      <div class="most-searched-words" *ngIf="!showDocuments">
+        <p class="title ion-text-center">Palavas mais pesquisdas</p>
       </div>
       
       <!-- search result document-->
-      <div class="search-result">
+      <div class="search-result" *ngIf="showDocuments">
         <div class="header">
           <div class="d-flex ion-justify-content-between ion-align-items-center">
             <div class="d-flex sort-by ion-justify-content-center">