One of my components has nested ngFor directives looping through an array of users and their posts. I have a view link within this element, and when clicked, it should show detailed information about both the user and the post. However, the current setup is causing issues - the details shown are either incorrect or not corresponding to each other. The routing is set up with a route ending in :/ that displays both detailed views. Here's the code for the view link:
<a mat-button routerLinkActive [routerLink]="['/city-care/view-request/', request.id]">View</a>.
I want to ensure that clicking on the view link will display the correct user and post details together. How can I achieve this? Any suggestions would be helpful.
Here's a snippet from my list component:
<mat-accordion multi="true" *ngIf ="!isLoading && userIsAuthenticated">
<h3>All User Requests</h3>
<mat-expansion-panel class='panel' *ngFor="let user of users">
<mat-expansion-panel-header *ngIf="user.requests.length > 0">
<mat-panel-title>
<p>Name: {{ user.first_name }} {{ user.last_name }}</p>
</mat-panel-title>
</mat-expansion-panel-header>
<mat-panel-description *ngFor="let request of user.requests">
<p class='left-align'>Request: {{ request.name }} <br>
{{request.details}}</p>
<div class="col sm6 right-align">
<a mat-button routerLinkActive [routerLink]="['/city-care/view-request/', request.id,
user.id]">View</a>
</div>
</mat-panel-description>
</mat-expansion-panel>
</mat-accordion>
And here's a glimpse of my detailed view component:
<div *ngIf="request && user && !isLoading && userIsAuthenticated">
<div class="card">
Contact Person: {{user.first_name}} {{user.last_name}} <br>
Email: {{ user.email }} <br>
Phone: {{ user.phone }} <br>
Mobile: {{ user.mobile_phone }} <br>
<hr>
Need: {{ request.name }} <br>
Details: {{ request.details }}<br>
Date Needed: {{ request.needByDate | date }} <br>
</div>
</div>
<div class="col sm6 right-align">
<button class="waves-effect waves-light btn back" routerLink="/city-care/site-
postings">Back</button>
</div>
My current route looks like this:
{ path: 'city-care/view-request/:id', component: ViewRequestComponent, canActivate: [ AuthGuard
] },
In the detailed view component ts file, I am using route snapshot to fetch the details. How can I ensure that both the user and the request details are displayed accurately on the same page?