How to fire "focusout" event when focus lost of input placed in table?

Question

I have a table where inputis placed:

<tr *ngFor="let persons of ReceivedData">
  <td *ngFor="let person of persons">

    <div *ngIf="person.personId === editRowId && person.editable === true ">
        <input type="number" [(ngModel)]="person.CarCount" 
               (focusout)="focusOutFunction()"/>
    </div>                            
    <div *ngIf="person.editable === false " (click)="toggle(person)">
        {{ person.CarCount ? person.CarCount : '-' }}
    </div>

  </td>
<tr>

But the focusout event isn't fired. Here's the method handling the focusout function:

focusOutFunction() {        
}

Interestingly focusout works perfectly when input is not placed inside table:

<input type="number" (focusout)="focusOutFunction()" />

How can I fire an event when I focus inside of the table?

Here's a working plnkr of focusout proc'ing inside a table with a similar setup as you have: https://plnkr.co/edit/Bqxnf3aGb0DdSEGYgIoc?p=preview — Z. Bagley, Sep 07 '17 at 13:32
@Z.Bagley `(blur)` is also not working. Moreover, there are no broweser errors. — StepUp, Sep 07 '17 at 13:32
@Z.Bagley thanks for example. But I pull my head, it doesn't work on my browser. What can I do? — StepUp, Sep 07 '17 at 13:40
Z.Bagleys example works fine in my browser. If his doesn't work for you, then maybe there is something wrong with your browser. Try a different one. — Joseph Cho, Sep 07 '17 at 13:45
@JosephCho it is the most popupar browser - Chrome. I cannot use another browser. — StepUp, Sep 07 '17 at 13:47
I am also using chrome... Bagleys example doesn't work for you? That is very strange since it works for me. — Joseph Cho, Sep 07 '17 at 13:57

score 5 · Accepted Answer · answered Sep 08 '17 at 14:47

Here's a working plnkr of focusout proc'ing inside a table with a similar setup as you have. The other key is to include an autofocus attribute:

 <input type="number" [(ngModel)]="person.CarCount" 
           (focusout)="focusOutFunction()" autofocus/>

score 3 · Answer 2 · answered Sep 07 '17 at 15:15

3

Use blur event to get focus out.

<input type="number" [(ngModel)]="person.CarCount" 
               (blur)="focusOutFunction()"/>

answered Sep 07 '17 at 15:15

Rohan Fating

2,135
15
24

How to fire "focusout" event when focus lost of input placed in table?

2 Answers2