title: Detect if element has focus in Angular2
body: <p>I am displaying an autocomplete dropdown for a text input using (focus)="showSearchList=true" on the input, and hiding it again using (blur)="showSearchList=false".</p>
  
  <p>My problem is that if one of the results in the dropdown is clicked I want to trigger another method, but by clicking the element in the dropdown I am triggering the blur method of the input, so the dropdown results do not get clicked.  What is the best way to make this work?  I am using ES6, not Typescript, and am struggling to find anything on Google.</p>
  
  <p>This is the template I have so far:</p>
  
  <pre><code>&lt;div id="searchContainer"&gt;
      &lt;input [(ngModel)]="search"
             (ngModelChange)="filterSearch()"
             (focus)="showSearchList=true;"
             (blur)="showSearchList=false"
             type="text"
             id="searchJobs"
             placeholder=" Search"/&gt;
      &lt;div *ngIf="showSearchList"
           id="searchDropdown"&gt;
          &lt;p *ngFor="let result of filteredSearchResults; let index = index;"
              (click)="addResultToResults(index); search='';"&gt;
              {{result}}
          &lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I thought instead of setting showSearchList to false on blur, I could call a method instead that checks which element has focus, and depending on that either hide the dropdown, or run my addResultToResults method and then hide the dropdown, but I have no idea how to check which element has focus in angular2.</p>
  
  <p>Would love some feedback on this!</p>