Angular InstantSearch results disappearing

Hello,

I discovered InstantSearch after going through this tutorial:

I’m trying to customize the code so that a user can select a record from the results list. My problem is that as soon as I click outside of the search box my results disappear. How do I make an individual hit selectable?

Here is my code:

HTML:

  <ais-instantsearch [config]="searchConfigEX">
    <ais-search-box
      (change)="searchChangedEX($event)"
      placeholder="Search Exercises"
      ></ais-search-box>

    <ais-hits *ngIf="showResultsEX">
      <ng-template let-hits="hits">
        <div *ngFor="let hit of hits">
          <ais-highlight attribute="name" [hit]="hit"></ais-highlight>
        </div>
      </ng-template>
    </ais-hits>
  </ais-instantsearch>

Typescript:

  searchConfigEX = {
    ...environment.algolia,
    indexName: 'ngFitnessLog_Exercises'
  };

showResultsEX = false;

  searchChangedEX(query) {
    if (query.length) {
      this.showResultsEX = true;
    } else {
      this.showResultsEX = false;
    }
  }

@jw.croley Hi thanks for creating this subject, could you create a reusable example using our templates?

Here’s one for Angular InstantSearch: https://codesandbox.io/s/github/algolia/instantsearch-templates/tree/master/src/Angular%20InstantSearch