ElasticSearch - Angular Search Template

search.component.html

<div class="searchbox">
  <input
    #searchInput
    type="text"
    placeholder="Find a Person or Contact"
    (keyup)="updateSearch.next($event)"
    (focus)="showResults()">
  <i
    class="search-icon fa fa-search"
    (click)="focusInput()"
    *ngIf="!query"></i>
  <span
    class="clear-icon"
    (click)="clearResults()"
    *ngIf="query">&times;</span>
  <ul
    class="results"
    *ngIf="search.results && search.results.length && resultsVisible">
    <li *ngFor="let contact of search.results">
      <a [routerLink]="'/contact/' + contact.id">
        <i class="fa fa-id-card"></i>
        <span>
          <strong [innerHTML]="highlightResults(contact.company ? contact.company : contact.name)"></strong><br>
          <span [innerHTML]="highlightResults(contact.company ? contact.name : contact.title)"></span>
        </span>
      </a>
    </li>
  </ul>
  <div
    class="no-results"
    *ngIf="query && search.results && !search.results.length && !search.isFetching">
    No results found matching <strong>{{ query }}</strong>.
  </div>
  <div
    class="loading"
    [class.disabled]="!search.isFetching">
    <app-loading-spinner></app-loading-spinner>
  </div>
</div>