title: Angular 5 multiple events not calling
body: <p>I am trying to build sample app in angular5. Code sample is as below.
  Issue is after clicking on any table row, it is firing only textbox blur event and table row click event is not fired.
  My requirement is to get table row click event fired first and then textbox blur event. Any suggestions?</p>
  
  <p>test.component.html</p>
  
  <pre><code>  &lt;div class="container"&gt;
    &lt;h1&gt;Angular events&lt;/h1&gt;
    &lt;hr /&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-xl"&gt;
        &lt;input #inputText type="text" (keyup)="filterList(inputText.value)" (blur)="hideList()" /&gt;
        &lt;table class="table" *ngIf="showList"&gt;
          &lt;thead&gt;
            &lt;tr&gt;
              &lt;th scope="col"&gt;name&lt;/th&gt;
              &lt;th scope="col"&gt;date&lt;/th&gt;
              &lt;th scope="col"&gt;time&lt;/th&gt;
              &lt;th scope="col"&gt;price&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
            &lt;tr *ngFor="let event of gridEventList" (click)="selectItem($event)"&gt;
              &lt;td&gt;{{event.name}}&lt;/td&gt;
              &lt;td&gt;{{event.date}}&lt;/td&gt;
              &lt;td&gt;{{event.time}}&lt;/td&gt;
              &lt;td&gt;{{event.price}}&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/tbody&gt;
        &lt;/table&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>test.component.ts</p>
  
  <pre><code>filterList(input:string) {
          console.log("filter list")
      }
  
      selectItem(event){ 
        console.log("select event row values")
      }
  
      hideList(){
        console.log("text lost focus")
      }
  </code></pre>