How do you programmatically focus on a column/row

Question

Table version: 11.3.2

Angular version: 5.2.4

I am adding a new row to edit at the bottom of the table when a user clicks tab AND they are on the last column/row however I cannot get the focus to be set to the first column of the new row. Any advice on how I can focus programmatically on the first column of the new row?

My HTML is :

<div class="haulsScreen">
  <h2 class="mat-h2">Hauls</h2>
  <ngx-datatable
    #mydatatable
    class="material"
    [headerHeight]="50"
    [limit]="20"
    [columnMode]="'force'"
    [footerHeight]="50"
    [rowHeight]="'auto'"
    [rows]="rows">
    <ngx-datatable-column name="Haul">
      <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="value" let-row="row">

        <input
          autofocus
          (blur)="updateValue($event, 'haul', rowIndex)"
          type="text"
          [value]="value"
        />
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column name="Gender">
      <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-row="row" let-value="value">
        <select
          (blur)="updateValue($event, 'gender', rowIndex)"
          [value]="value">
          <option value="male">Male</option>
          <option value="female">Female</option>
        </select>
      </ng-template>
    </ngx-datatable-column>

  </ngx-datatable>
</div>

and my TS file is:

import { Component, HostListener, OnInit } from '@angular/core';

@Component({
  selector: 'app-hauls',
  templateUrl: './hauls.component.html',
  styleUrls: ['./hauls.component.scss']
})
export class HaulsComponent implements OnInit {
  rows = [];
  lastRowLastColumn = false;

  constructor(private obsStateService: ObsStateService) {
    this.fetch(data => {
      this.rows = data;
    });

  }

  @HostListener('window:keyup', ['$event'])
    keyEvent(event: KeyboardEvent) {

      if (event.key === 'Tab' && this.lastRowLastColumn) {
        this.rows = [...this.rows,{}];
      }
  }

  ngOnInit() {
  }

  fetch(cb) {
    const req = new XMLHttpRequest();
    req.open('GET', `assets/data.json`);

    req.onload = () => {
      cb(JSON.parse(req.response));

    };

    req.send();
  }


  updateValue(event, cell, rowIndex) {
    // console.log('inline editing rowIndex', rowIndex);
    // console.log('inline editing cell', cell);
    // console.log(event);

    this.rows[rowIndex][cell] = event.target.value;
    this.rows = [...this.rows];
    if(cell==='gender' && (this.rows.length-1) == rowIndex)
      this.lastRowLastColumn = true;
    else
      this.lastRowLastColumn = false;

    // console.log('UPDATED!', this.rows[rowIndex][cell]);


  }
}

Answer 1

I don't see when you add a new row. Anyway, you want to do a "focus" of an input recient created using ViewChildren (I write an example in general, not but your particular code)

if your input has a reference variable

<input #myinput>

You can have in your component.ts

//See that I put QueryList<ElementRef>
@ViewChildren('myinput') childChildren: QueryList<ElementRef>;
adding:boolean=false; //<--a variable "adding"

//In a ngOnAfterViewInit, we subscribe to "this.childChildren.changes"
  ngAfterViewInit() {
    this.childChildren.changes
      .pipe(takeWhile(() => this.isAlive))
      .subscribe(children => {
      //I used a variable adding, because I only want to focus when I want
      //not in any change of the input
      if (this.adding) {
        this.adding = false;
        setTimeout(() => {
          children.last.nativeElement.focus();
        }, 0)
      }
    });
  }

When you want to add and focus,e.g. in a function

addRow()
{
    this.adding=true;
    <!---some to add the row--->
}

NOTA: I used a "tipical" construction .pipe(takeWhile(() => this.isAlive)) for easily unsubscribe an observable if in my component I have an

  //Early in the code
  isAlive:boolean=true;

  //In a ngOnDestroy
  ngOnDestroy() {
    this.isAlive = false;
  }