Hey there! I'm struggling with setting up the routing in my Angular app. I keep encountering the error 'Cannot match any routes', which makes me think that something is misconfigured.
I'm attempting to create a functionality where clicking on a person's name from a table will navigate the user to a new route (detail/ID) displaying that individual's information.
Below is the code snippet:
Runner-list.HTML - Where the user can click on the name
<h2 class="text-center">{{title}}</h2>
<div class="container">
<table class="table table-striped">
<thead class="thead-dark">
<tr>
<th scope="col">Runner Name</th>
<th scope="col">UKAN Number</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let runner of myRunners | paginate: {itemsPerPage: 10, currentPage: p }">
<td><a routerLink="/detail/{{runner.RunnerUKAN}}">{{runner.RunnerName}}</a></td>
<td>{{runner.RunnerUKAN}}</td>
</tr>
</tbody>
</table>
<pagination-controls class="text-center" (pageChange)="p = $event"></pagination-controls>
</div>
app-routing module
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RunnerDetailsComponent} from './runner-details/runner-details.component';
import {RouterModule, Routes} from '@angular/router';
const routes: Routes = [
{ path: 'detail:/id', component: RunnerDetailsComponent }
];
@NgModule({
declarations: [],
imports: [
CommonModule,
RouterModule.forRoot(routes)
],
exports: [RouterModule]
})
export class AppRoutingModule { }
Runner Details ts file (The information shown upon clicking)
import { Component, OnInit } from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {Location} from '@angular/common';
import {RunnersService} from '../model/runners.service';
@Component({
selector: 'app-runner-details',
templateUrl: './runner-details.component.html',
styleUrls: ['./runner-details.component.css']
})
export class RunnerDetailsComponent implements OnInit {
Runner: any;
constructor(
private route: ActivatedRoute,
private RuService: RunnersService,
private location: Location
) { }
getHero() {
const id = +this.route.snapshot.paramMap.get('detail');
this.RuService.getRun(id).subscribe(runner => this.Runner = runner);
}
getRunner(id) {
this.RuService.getRun(id).subscribe(runner => this.Runner = runner);
}
ngOnInit() {
this.getHero();
}
}
If you require any other file, please let me know.
Thank you for any assistance!