javascript - How to add next and previous control in the record detail view?

Question

If you will click on any of the record row you will see the details of the record.

I wanted to add next and previous button on the details of next/previous row without click on top row. So that user don't have to click again back to top row to view details. They can simply use next / previous control to see next and previous record details.

I was trying this but didn't help.

<div *ngIf="isView" class="view-details">
    <button (click)="onPrev()">Prev</button>
<button (click)="onNext()">Next</button>

component.ts

current = 0;
  prev = -1;

  onPrev() {
    this.prev = this.allUser.current--;
    alert("Prev" + this.prev);
  }
  onNext() {
    this.prev = this.allUser.current++;
    alert("Next" + this.prev);
  }

Please help me with the solution.

You can view the code here: https://stackblitz.com/edit/angular-ivy-1tsz1r?file=src%2Fapp%2Fapp.component.html

Answer 1

You can find example here in this StackBliz Link

Inside you table tr click I have added new method parameter like below..

<tr class="record-row" (click)="viewUser(user, i, filteredUsers)"
                *ngFor="let user of filteredUsers;let i = index">

and Inside your component viewUser() method is...

viewUser(user: any, index, filterData) {
  this.isView = true;
  console.log(user, index, filterData);
  this.userObj = user;
  this.currentIndex = index;
  this.allUserTableData = filterData;
}

In above i have added two new class-variable currentIndex and allUserTableData. based on this two data variable next and previous traversal is looks like below code...

now.. next traversal code is

nextRecord() {
   let next = (this.currentIndex += 1);
   if (next > this.allUserTableData.length - 1) {
     this.currentIndex = 5;
     return;
   }
   let nextRecord = this.allUserTableData[next];
    this.userObj = nextRecord;
    console.log(nextRecord, next);
 }

previouse traversal code is

previousRecord() {
  let next = (this.currentIndex -= 1);
  if (next < 0) {
    this.currentIndex = 0;
    return;
  }
  let nextRecord = this.allUserTableData[next];
  this.userObj = nextRecord;
  console.log(nextRecord, next);
}