如何在记录详细视图中添加下一个和上一个控件？

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);
}