Navigate to the next input on the p-table when entering a value

Question

Navigate to the next input on the p-table when entering a value

In my component, I have a p-table with input fields. I want to achieve the functionality where, after filling in the input and sending the data to the database via REST, pressing 'tab' will shift the focus to the next input field similar to Excel.

Should I implement this using directives?

<ng-template pTemplate="body" class="tableBody" let-rowData let-x="rowIndex" let-columns="columns">
   <tr [pSelectableRow]="rowData" [ngClass]="rowData.editable != 'true' ? 'cell-color-gray2' : null" [hidden]="!showSubTotal(rowData)">
      <td *ngFor="let col of columns; let i = index" class="ui-resizable-column" [pEditableColumn]="rowData[col.field]" [pEditableColumnField]="rowData[col.field]">
         <p-cellEditor>
            <ng-template pTemplate="input">
               <div *ngIf="menuLabels.state=='editable' && rowData.editable=='true'">
                  <div *ngIf="col.field=='customEffort'" class="tableColumnRight">
                     <input #inputs type="text" ngDefaultControl [(ngModel)]="this.rowData.effort" autoResize="autoResize"
                            (focusout)="workaroundUpdateDataEffort({ data: rowData, costCenterNr: col.header.split(' ')[0], columns: columns }, x, i)"
                            (keydown.tab)="workaroundUpdateDataEffort({ data: rowData, costCenterNr: col.header.split(' ')[0], columns: columns }, x, i)"
                            (keydown.enter)="workaroundUpdateDataEffort({ data: rowData, costCenterNr: col.header.split(' ')[0] })"
                            (keydown.esc)="workaroundCatchEsc({ data: rowData })">
                  </div>

angular typescript

Answer 1

Answer №1

If you want to focus on a specific HTML element, there are different ways to achieve it. One way is through using a directive, but you can also trigger the focus action through an event. The key is having a reference to the HTML element that you want to focus on. This can be accomplished by utilizing a ViewChild in your component:

@ViewChild('tab') inputEl:ElementRef;

To make this work, you need to define a ref-id in your HTML markup:

<tr #tab> <!-- element that holds the loop -->

Then, when you call a REST service in your code:

onYourEvent(index) {
  restService.sendData().subscribe((res) => {
    // handle the received data
    // then proceed to set focus to the next element:
    const inputs = this.inputEl.nativeElement.querySelectorAll('input');
    if (inputs.length > index + 1) {
      inputs[index + 1].focus();
    }
  });
}

For a demonstration, you can check out this demo on stackblitz

Answer 2

If you want to focus on a specific HTML element, there are different ways to achieve it. One way is through using a directive, but you can also trigger the focus action through an event. The key is having a reference to the HTML element that you want to focus on. This can be accomplished by utilizing a ViewChild in your component:

@ViewChild('tab') inputEl:ElementRef;

To make this work, you need to define a ref-id in your HTML markup:

<tr #tab> <!-- element that holds the loop -->

Then, when you call a REST service in your code:

onYourEvent(index) {
  restService.sendData().subscribe((res) => {
    // handle the received data
    // then proceed to set focus to the next element:
    const inputs = this.inputEl.nativeElement.querySelectorAll('input');
    if (inputs.length > index + 1) {
      inputs[index + 1].focus();
    }
  });
}

For a demonstration, you can check out this demo on stackblitz

Navigate to the next input on the p-table when entering a value

Answer №1

Similar questions

Is the variable empty outside of the subscribe block after it's been assigned?

The value of the local variable remained unchanged despite the occurrence of global events (window.onresize)

How can the ordering of dynamically generated components be synchronized with the order of other components?

Tips for setting an argument with a promise data type

Unable to simulate the Enter key press event for a text area using Angular 7

The html-duration-picker is not being displayed in the proper format

Error encountered when attempting to inject a service into another service due to circular dependency issues

Streamline copyright verification with Angular

Making sure that a commitment does not come to fruition

Designing Angular 1 table row components with future migration to Angular 2 in consideration

Navigate back to the initial page in Ionic2 using the navpop function

In order to dismiss the popup message in the component.ts file within Angular 4, I must figure

Using Angular 6 to pass basic authentication in httpClient's httpOptions

Create a unique type in Typescript that represents a file name with its corresponding extension

Encountering a module resolve error when a tsx file is added to the project item group

Angular 5's recursive directives in dynamic modules without any circular dependencies

Utilizing Angular 2 Components in a Repetitive Manner

Inquiring about the syntax of TypeScript and React – any insights?

Exploring the world of Wordpress Rest API for retrieving posts

Mocking store.dispatch in Jest with TypeScript did not result in any function calls being made