Search cosmetics enhancement

src/app/shared/toolbar/toolbar.component.html

@@ -11,7 +11,7 @@
         <div [class]="'search-form '+(showSearchInput? 'active': '')">
           <mat-icon class="search-box-icon show-md" (click)="onTogleSearch()">arrow_back</mat-icon>
           <mat-icon class="search-box-icon hide-md" (click)="onSearch(searchBox.value)">search</mat-icon>
-          <input #searchBox id="search-box" class="search-box" type="search" placeholder="Search apps" (keyup.enter)="onSearch(searchBox.value)" autofocus autocapitalize="none"/>
+          <input #searchBox id="search-box" class="search-box" type="search" placeholder="Search apps" (keyup.enter)="onSearch(searchBox.value)" (keydown)="onTypeSearch()" autofocus autocapitalize="none"/>
         </div>
       </div>
     </div>

src/app/shared/toolbar/toolbar.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, ElementRef, ViewChild } from '@angular/core';
 import { Output, EventEmitter } from '@angular/core';
 
 @Component({
@@ -9,6 +9,7 @@ import { Output, EventEmitter } from '@angular/core';
 export class ToolbarComponent {
 
   @Output() search: EventEmitter<string> = new EventEmitter<string>();
+  @ViewChild('searchBox') searchInput: ElementRef;
 
   showSearchInput = false;
 
@@ -19,10 +20,15 @@ export class ToolbarComponent {
 
   onTogleSearch() {
     this.showSearchInput = !this.showSearchInput;
+    if (this.showSearchInput) this.searchInput.nativeElement.focus();
   }
 
   onCloseSearch() {
     this.showSearchInput = false;
   }
 
+  onTypeSearch() {
+    this.showSearchInput = true;
+  }
+
 }