Open the app.module.shared.ts file and add the following highlighted line to the existing code:
[...]
@NgModule({
declarations: [
AppComponent,
NavMenuComponent,
HomeComponent,
QuizListComponent,
QuizComponent
],
imports: [
CommonModule,
HttpClientModule,
FormsModule,
RouterModule.forRoot([
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'quiz/:id', component: QuizComponent },
{ path: '**', redirectTo: 'home' }
])
]
})
[...]
The meaning of this is quite straightforward; each time the app receives an HTTP request pointing to /quiz/<id>, it will load the QuizComponent, passing the <id> value as a GET parameter corresponding to the ID key.
Angular will iterate through these rules starting with the first one until it finds a match; ensure to add the new routing rules before the ** global fallback that redirects everything to home, or they will never be executed!