Greetings! I am currently building a Shop Page in Angular 4 and encountering an obstacle with Angular routing. The issue arises when a user clicks on a product category, the intention is for the website to direct them to the shop page.
On the homepage, there are two links provided under product categories -
<h2>Product Categories</h2>
<a [routerLink]="['/shop', id]>Jeans</a>
<a [routerLink]="['/shop', id]>Shirts</a>
For the shop page component, I've created a service to retrieve data from a JSON file
export const PRODUCTS: Products[] = [
{
id: 1,
productCat:'Jeans',
product: [
{
prodId: 1a,
productName: 'Trendy Jeans',
},
{
prodId: 2a,
productName: 'Trendy Jeans second product',
},
],
},
{
id: 2,
productCat:'Shirts',
product: [
{
prodId: 1b,
productName: 'Trendy Shirts',
},
],
},
]
When a user selects jeans, only jean products should be displayed, and clicking on shirts should reveal shirt products exclusively.
Below is my app routing module -
app-routing.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { routes } from './routes';
@NgModule({
imports: [
CommonModule,
RouterModule.forRoot(routes)
],
exports: [ RouterModule ],
declarations: []
})
export class AppRoutingModule { }
routes.ts file -
export const routes:Routes = [
{path: 'home', component: HomeComponent},
{path: 'shop/:id', component: ShopComponent},
{path: '', redirectTo: '/home', pathMatch: 'full'}
];
Therefore, when selecting jeans or shirts, the component should filter and display the respective products accordingly. Is it possible to achieve this within the same component?