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">

src/app/pages/search/search.page.scss

@@ -92,9 +92,14 @@
 }
 
 
-// document
 .d-flex{
   display: flex;
+}
+
+// document
+.word-searh-result-container{
+  display: flex;
+  flex-wrap: wrap;
   // search result
   .search-result{
     width: 100%;
@@ -165,9 +170,9 @@
   }
   // most searched word
   .most-searched-words{
-    width: 400px;
-    display: none;
-    p{
+    width: 100%;
+    p.title{
+      width: 100%;
       height: 24px;
       font-family: Roboto;
       font-size: 20px;
@@ -180,36 +185,45 @@
 
 
 
-@media only screen and (min-width: 1024px) {
 
-  .header-main {
-    background-color: #0782c9;
-    .profile{
-      display: inline-block;
-    }
-    .icon-most-searched-word-open{
-      display: none !important;
-    }
-  }
+//@media only screen and (min-width: 1024px) {
 
-  .options{
-    .container{
-      border-bottom: 1px solid #ebebeb;
-      .icon{
-        display: flex;
-      }
-    }
-    padding: 0px 20px;
-  }
+//  .header-main {
+//    background-color: #0782c9;
+//    .profile{
+//      display: inline-block;
+//    }
+//    .icon-most-searched-word-open{
+//      display: none !important;
+//    }
+//  }
+
+//  .options{
+//    .container{
+//      border-bottom: 1px solid #ebebeb;
+//      .icon{
+//        display: flex;
+//      }
+//    }
+//    padding: 0px 20px;
+//  }
 
       
-  .most-searched-words{
-    display: inline-block !important;
-  }
-  .search-result{
-    border-left: 1px solid #d8d8d8;
-    .header{
-      border-top: unset !important;
-    }
-  }
-}
+
+//  .search-result{
+//    border-left: 1px solid #d8d8d8;
+//    .header{
+//      border-top: unset !important;
+//    }
+//  }
+
+//  .most-searched-words{
+//    width: 400px !important;
+//  }
+
+//  .word-searh-result-container{
+//    flex-wrap: wrap;
+//  }
+  
+
+//}

src/app/pages/search/search.page.ts

@@ -21,10 +21,11 @@ export class SearchPage implements OnInit {
 
   searchCategories: SearchCategory[];
   searchDocuments: SearchDocument[];
+  showDocuments: boolean;
   
   constructor(private modalController: ModalController,
     private search: SearchService) {
-
+      this.showDocuments = false;
     }
 
   ngOnInit() {
@@ -34,9 +35,7 @@ export class SearchPage implements OnInit {
   }
 
   /**
-   * 
    * @description get respose from the server
-   * @returns repn 
    */
    basicSearch(){
       // search in API
@@ -44,20 +43,32 @@ export class SearchPage implements OnInit {
       this.search.basicSearch(this.searchSubject, this.searchDate, this.searchSender
         ,this.searchOrganicEntiry, this.searchDocTypeId).subscribe(res=>{
         
-          // binde respose
+        // bind respose
         this.searchCategories = res.Categories;
         this.searchDocuments = res.Documents;
 
-        console.log(this.searchCategories);
-        console.log(this.searchDocuments);
+        // hide show document
+        if(this.searchDocuments.length >= 1){
+          this.showDocuments = true;  
+        } else {
+          this.showDocuments = false
+        }
+      
 
       });
    }
 
+   /**
+    * @description set empty value to searchSubject
+    */
+   clearSearchInput(){
+    this.searchSubject = ""
+   }
+
   /**
    * @param isoDate String Iso date
-   * @returns date in formate  MM/DD/YYYY
-   * @description convert Iso date to MM/DD/YYYY
+   * @returns date in formate  dd/MM/yyyy
+   * @description convert Iso date to dd/MM/yyyy
    */
   formateIsoDate(isoDate:string): string{
     const date = new Date(isoDate);