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?

Gorged

Might need to use (blur) for this case. – Rondo

You're not receiving any browser errors? – Rondo

Here's a working plnkr of focusout proc'ing inside a table with a similar setup as you have: plnkr.co/edit/Bqxnf3aGb0DdSEGYgIoc?p=preview – Rondo

@Z.Bagley (blur) is also not working. Moreover, there are no broweser errors. – Gorged

@Z.Bagley thanks for example. But I pull my head, it doesn't work on my browser. What can I do? – Gorged

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. – Octad

@JosephCho it is the most popupar browser - Chrome. I cannot use another browser. – Gorged

I am also using chrome... Bagleys example doesn't work for you? That is very strange since it works for me. – Octad

Answer 1

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/>

Rondo

Answer 2

Use blur event to get focus out.

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

Insusceptible