Angular 5 multiple events not calling

Question

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?

test.component.html

  <div class="container">
  <h1>Angular events</h1>
  <hr />
  <div class="row">
    <div class="col-xl">
      <input #inputText type="text" (keyup)="filterList(inputText.value)" (blur)="hideList()" />
      <table class="table" *ngIf="showList">
        <thead>
          <tr>
            <th scope="col">name</th>
            <th scope="col">date</th>
            <th scope="col">time</th>
            <th scope="col">price</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let event of gridEventList" (click)="selectItem($event)">
            <td>{{event.name}}</td>
            <td>{{event.date}}</td>
            <td>{{event.time}}</td>
            <td>{{event.price}}</td>
          </tr>
        </tbody>
      </table>
      </div>
    </div>
</div>

test.component.ts

filterList(input:string) {
        console.log("filter list")
    }

    selectItem(event){ 
      console.log("select event row values")
    }

    hideList(){
      console.log("text lost focus")
    }

don't use "event" as variable -it's a "forbidden word"- So, you can pass as argument to your function. e.g. < tr *ngFor="let ev of gridEventList" (click)="selectItem($event,ev)" > < td>{{ev.name}}< /td> — Eliseo, Jan 28 '18 at 21:56

Zze · Accepted Answer · 2018-01-30T20:41:34.227

My requirement is to get table row click event fired first and then textbox blur event

You are better off calling hideList() from inside your selectItem() so you are always sure that this is fired after the <tr> is selected. I would suggest dropping the blur event altogether and then just..

selectItem(evt){ 
    console.log("select event row values");
    this.hideList();
}

However... If you really need the blur event, then you need to swap:

<tr *ngFor="let event of gridEventList" (click)="selectItem($event)">

to:

<tr *ngFor="let event of gridEventList" (mousedown)="selectItem($event)">

This is because the order for the click events is: mousedown > blur > click

The mousedown and blur events occur one after another when you press the mouse button, but click only occurs when you release it. Reference.

Your suggestions are very useful. Perfectly worked for me.Thanks. — ketan27j, Jan 29 '18 at 04:42

Angular 5 multiple events not calling

1 Answers1