I am encountering an issue with my routing setup - when I click on an item in the list-item component, it does not successfully route to the detail-component. Here is a glimpse of my source code:
product-list.component.html:
<h1>Product List Component</h1>
<ul class="products">
<li *ngFor="let product of products">
<a routerLink="/detail/{{product.id}}">
<span class="badge">{{product.id}}</span> {{product.name}}
</a>
</li>
</ul>
product-detail.component.ts
export class ProductDetailComponent implements OnInit {
constructor(
private route: ActivatedRoute,
private productService: ProductService
) { }
ngOnInit() {
this.getProduct();
}
private getProduct(): void {
const id = +this.route.snapshot.paramMap.get('id');
this.productService.getProductById(id);
}
}
product-detail.component.html:
<p>Just one line to test routing to this component</p>
ProductService.ts
@Injectable({
providedIn: 'root'
})
export class ProductService {
constructor() { }
getAllProduct(): Product[] {
return arrayProduct;
}
getProductById(id: number): Product {
const product = arrayProduct.find(product => product.id === id);
return product;
}
}
Router
const routes: Routes = [
{ path: 'detail/:id', component: ProductDetailComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Here is an image view of the list-item component https://i.sstatic.net/f3xAj.png
If anyone can provide assistance, I would greatly appreciate it. Thank you!