Routing not working as expected - angular 19

I have a HTML code:

<table mat-table [dataSource]="claims" matSort class="mat-elevation-z8">
<ng-container *ngFor="let column of displayedColumns" [matColumnDef]="column">
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ titleCase(column) }}</th>

<td mat-cell *matCellDef="let element">
<!-- Add clickable links for Claim Id -->
<ng-container *ngIf="column === 'claimID'; else defaultCell">
<a href="#" (click)="onClaimIdClick(element[column])">
{{ element[column] }}
</a>
</ng-container>
<ng-template #defaultCell>
{{ getElementValue(element, column) }}
</ng-template>
</td>
</ng-container>

<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>


It loads the table correctly, I have added click functionality to claimId column.
TS code is:

onClaimIdClick(claimId: string): void {
console.log('Navigating to:', `/claims-summary/${claimId}`);
this.router.navigate(['/claims-summary', claimId]);
}


When I click on entries under claimId, it redirects to next page, but calls unmatched route. This is my app.routes.ts.

import { Routes } from '@angular/router';
import { LoginComponent } from './components/login/login.component';
import { HomeComponent } from './components/home/home.component';
import { ClaimsSummaryComponent } from './components/claims-summary/claims-summary.component';
import { ClaimsInsightsComponent } from './components/claims-insights/claims-insights.component';
import { ClaimsComponent } from './components/claims/claims.component';

export const routes: Routes = [
{ path: '', component: LoginComponent }, // Default route for login
{ path: 'home', component: HomeComponent }, // route for home
{ path: 'claims', component: ClaimsComponent }, // route for claims
{ path: 'claims-summary/:claimID', component: ClaimsSummaryComponent }, // route for claims summary
{ path: 'claims-insights/:type', component: ClaimsInsightsComponent },
{ path: '**', redirectTo: '', pathMatch: 'full' }, // Redirect any unmatched route to error page (Reminder to ask Akanksha to design error page)
];


If I open the new url, http://localhost:4200/claims-summary/claimId in a new tab, it loads perfectly. But when I try to navigate to that page via onClick, it redirects to claim-summary, but calls unmatched route every time. What am I missing here?

Continue reading...