Event from PrimeNG p-datatable when row is added

Issue

I have a p-datatable bound to a list of entries. I want to set focus on newly, dynamically created rows; specifically on an input in the new row. But how?

Whenever I dynamically add an entry to the bound list of entries a new datatable row is added. Works fine. But I need to know when that has happened and I need access to the new row so I can set the focus. I've been looking for some kind of onRowAdded event, but p-datatable doesn't seem to have one. How to get around this?

<p-dataTable [value]="entries">
   . . .
   <p-column>
      <ng-template let-item="rowData" pTemplate="body">
          <input type="time" [value]="item.StartTime"/>
   . . .

Solution

Ok, so I found a solution/workaround, independent of the p-datatable.

I set up an angular QueryList on one of the templated elements in the rendered row and subscribe to changes on it. This way I can get to the newly added rows in order to set focus.

So, in the html:

<p-dataTable [value]="entries">
   <p-column">
      <ng-template let-item="rowData" pTemplate="body">
          <input #myInput />

... and in the codebehind:

@ViewChildren('myInput') startTimeInputList: QueryList<ElementRef>;
. . .
ngAfterViewInit() {
   this.startTimeInputList.changes.subscribe((p) => {
       this._renderer.invokeElementMethod(p.last.nativeElement, 'focus');
   });
}

Answered By - BaBu