How to get the next id from the array when paging? - html

Question

I have a button that turns the pages. I need to remain in this component, change the ID in the address bar and thus I will change the information on the site. Data coming to me, look like this:
{
"users": [
{
"id": "3135",
"name": "Lulu"
},
{
"id": "8173",
"name": "Lala"
},
{
"id": "5783",
"name": "Lolo"
}
]
I am outputting detailed information about the user by getting an id. My navigation has looks like:
{ path: 'list', component: ListComponent },
{ path: '', redirectTo: '/list ', pathMatch: 'full' },
{ path: 'details/:id', component: DetailComponent }
I have a button, by pressing which the transition from '/details/Id' to 'details/nextId'. But this button does not work. This is a request for the next ID in the service. (I get the data from Database API​)
private users: User[] = new Array<User>();
private locator = (u: User, id: number) => u.id === id;
getNextId(id: number): number {
let index = this.users.findIndex(u => this.locator(u, id));
if (index > -1) {
return this.users[this.users.length > index + 2
? index + 1 : 0].id;
} else {
return id || 0;
}}
HTML:
<button class="next-user" [routerLink]="['details', userService.getNextId(user.id)]" routerLinkActive="active">
Next User
</button>
DetailsListComponent:
private userService: UserService,
private activeRoute: ActivatedRoute,
private location: Location,
private router: Router) {
activeRoute.params.subscribe(params => {
this.detail = params['details'] === 'details';
let id = params['id'];
if (id !== null) {
Object.assign(this.user, userService.getNextId(id));
}
});
}
detail: boolean = true;
I searched the Internet and here the answer to this question, but found only suitable for php. Please, help me. What am I doing wrong? I just recently began to study angular 7 and do not always understand what to do.
I do not know how to explain it correctly, how to explain my problem. But I will try, I have a page that displays a list of my users. Clicking on the user opens a new page with more detailed information about it. In order not to go back to the page with a list of users and not to select the next user, a page with detailed information about the user assumes the presence of the Next button. When I click on this button, the array is iterated, it is determined by which ID the page is currently open and which ID is the next in this array, after which the page goes to the next ID. That is, the same page is opened, but the information on it is about another user who is following the list after the previous user.
But my button is currently not working and I do not understand why.

Answer 1

I didn't understand what issue you are facing exactly but here is an overview of how you can route to next User id by clicking on button.
// in Component.ts file
// import Router from #angular/router
import { Router } from '#angular/router';
constructor(private _router: Router){}
// to get the next user id
getNextId(id: number): number {
// write your logic to get the next id here
}}
//navigate to user id
getNextUser(id:number){
let nextId = this.getNextId(id); // holds next id
this._router.navigate([`/register-step2/${nextId}`]);
}
<!-- In Component.html -->
<div class="userDetails">
<p> {{user.name}} </p>
<p> {{user.age}} </p>
<p> {{user.occuption}} </p>
</div>
<button class="next-user" (click)="getNextUser(user.id)">
Next Movie
</button>
I assumed that for each userid service gets called and the result of the service is stored on user variable. I Hope it helps .

Answer 2

=== EDIT (After the question was clarified) ===
Now I understand your use case. Here is how I would go about it.
Few things to note so that the example is clear:
list route was renamed to users (makes more sense to me)
Brand new UsersComponent is created to handle all the users-related routes
DetailComponent -> UserDetailsComponent
ListComponent -> UsersListComponent
Those are just my coding conventions so that things are clear. You can leave your naming style.
In your root component, you will have your root <router-outlet>. And you will also have another <router-outlet> in UsersComponent.
In your router settings you would have:
{ path: 'users', component: UsersComponent, children: [
{ path: '', component: UsersListComponent }
{ path: ':id', component: UserDetailsComponent }
] },
{ path: '', redirectTo: '/users ', pathMatch: 'full' }
Notice, I added a new component UsersComponent which will be a parent for both UsersListComponent and UserDetailsComponent. It will hold a <router-outlet> that will hold either UsersListComponent or UserDetailsComponent depending on the child route that is active.
For /users it will render UsersListComponent.
For /users/:id it will render UserDetailsComponent.
So, UsersListComponent will have something like the following template:
<div *ngFor="let user of users" class="user-list-item" >
<p>user.name</p>
<button class="open-user-details"
[routerLink]="['/users', user.id]">
Navigate To Details
</button>
</div>
In UserDetailsComponent you will have something like the following:
<div class="userDetails">
<p> {{user.id}} </p>
<p> {{user.name}} </p>
<p> {{user.age}} </p>
<p> {{user.occuption}} </p>
</div>
<button class="next-user"
[routerLink]="['/users', getNextUserId()]"
routerLinkActive="active">
Next User
</button>
And in .ts file for UserDetailsComponent you would have:
user: User; // complete user details object. ID included
constructor(private userService: UserService,
private activeRoute: ActivatedRoute)
// gets the next user id based on the current user.id
public getNextUserId(): number {
return this.userService.getNextId(this.user.id)
}
public ngOnInit(): void {
this.activeRoute.params.pipe(switchMap((params) => {
return this.userService.getUserById(params.id);
})).subscribe(user => {
this.user = user;
});
}
I assume your UserService has separate methods:
getNextId(curId: number): number
getUserById(userId: number): Observable<User>