My submenu's href and routerlink doesn't work but other links in the project works fine

Question

I'm using Angular 7 to build a website and I have a navigation menu bar generated dynamically. All of the menu items work perfectly ( using href ), the routing works fine. But in one component I have other links supposed to route me to different components but those and those only don't work. I tried using href and routerLink but none of them works. But when I inspect the page and manually click on the link in the href it works.

the link here is "product/{{categ.id}}. I'll show you my routes.

<div class="row">
  <div class="menu-cat mx-auto">
    <ul class="nav nav-pills" id="pills-tab" role="tablist">
      <li *ngFor="let categ of cat" class="nav-item">
        <a class="nav-link active" id="pizza-tab" data-toggle="pill" href="product/{{categ.id}}" role="tab" aria-controls="pizza"
          aria-selected="true">{{categ.name}}</a>
      </li> 
    </ul>
  </div>
</div>

const routes: Routes = [
    { path: 'home', component: HomeComponent },
    { path: ':categ/:id', component: PastriesComponent  },
    { path: 'Ice cream', component: IcecreamComponent },
    { path: 'FreakShake', component: FreakShakesComponent },
    { path: 'product/:id', component: EclairComponent },
    { path: '', redirectTo: 'home', pathMatch: 'full' }
];

since the route mapping matches I'm supposed to be sent to the EclairComponent, but when I click on the link nothing happens. Still if I manually write the link in the search bar it works.

Thank you in advance for your help.

Answer 1

Without looking into it too much, it looks like:

{ path: ':categ/:id', component: PastriesComponent  },

will match before

{ path: 'product/:id', component: EclairComponent },

Try swapping the order.

Another issue could be that {{ categ.id }} in your link is resolving to "", in which case nothing would match.