Angular Routing for product categories

0
votes

Hi I am creating a Shop Page in angular 4 and I am facing an issue with angular routing where when a user click a product category, the website should redirect him/her to the shop page.

In my home page. I have given two links in product categories - 

<h2>Product Categories</h2>
<a [routerLink]="['/shop', id]>Jeans</a>
<a [routerLink]="['/shop', id]>Shirts</a>

For shop page component I have created service to fetch the data from 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',
        },
    ],
},
]

So, when a user clicks on jeans it should show only jeans products and when a user clicks on shirts it should show only shirt products.

Here 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'}
];

So, when a user clicks on jeans it should show only jeans products and when a user clicks on shirts it should show only shirt products. Can we filter the data for the same component?

2
jsonangulartypescriptrouting

2 Answers

2
votes

You should use angular routerlink . href wont work in angular 

<a [routerLink]="['/shop', id]"> Jeans</a>
0
votes

To do routing in angularjs, you need to use routerLink attribute in the anchor tags and the router-outlet tag in the home page to display the response of the router Link.

<h2>Product Categories</h2>
<a routerLink="shop/:id">Jeans</a>
<a routerLink="shop/:id">Shirts</a>

In appcomponent.html use below tag to display the contents of the Shop component.html.

<router-outlet>