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

from your stackbliz its not clear what is your problem. Can you explain it more? — Developer, Jan 12 '21 at 14:21
@GaurangDhorda if you will click on any of the record, you will see details of it with 2 links previous n next. I want on click of it to see previous n next record details instead of every time I click on top to see details, I want a direct navigation to reduce clicks n directly see details of next or previous record. — Kunal Vijan, Jan 12 '21 at 14:23
Please add a minimum viable question with code example and try to explain the problem you are facing. Also update the link to stackblitz. — Mario, Jan 12 '21 at 14:55
@iepur1lla i did update the question will more details. if you can look into it and suggest me solution that would be really helpful. — Kunal Vijan, Jan 12 '21 at 14:57

Developer · Accepted Answer · 2021-01-12T15:05:33.807

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

thanks for your help. Can I ask for your help for 1 last issue please? https://stackoverflow.com/questions/65678821/how-can-i-show-only-1-record-which-has-a-least-score-among-all — Kunal Vijan, Jan 12 '21 at 15:38

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

1 Answers1