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?

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

Answer 2

Use blur event to get focus out.

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