Routerlink only works the first time

Question

I am trying to redirect with routerlink to a category of products. But it only works the first time. Although the change is reflected in the url (http://localhost:4200/product/3), the page remains static the 2nd time a link is clicked.

Router is { path: 'product/:prodClass',component: ProductPageComponent }

Product Page

HERE Console.log just works the first time.

  prodClass!: number; 

  submenusProduct: SubMenu []= [{
    name: 'Wine',
    url: '/product/4',
  }, {
    name: 'Liquor',
    url: '/product/1',
  },{
    name: 'Beer',
    url: '/product/2',
  },{
    name: 'Foods',
    url: '/product/3',
  }];

  parentFilterSelects!:RequestBodyProduct;
  parentFilterText!:string;

  constructor(private route: ActivatedRoute) { }

  ngOnInit(): void {
    this.prodClass = Number(this.route.snapshot.paramMap.get('prodClass')) || 0;
    console.log(this.prodClass);
  }

Product Page HTML

<app-section [submenus] = 'submenusProduct' [isCustomerPage]="false"></app-section>
<div class="container">
    <div fxLayout.gt-sm="row" fxLayout.lt-md="column">
        <app-product-filter fxFlex.gt-sm="25%" fxFlex.lt-md="25%" fxLayoutAlign="center none">
        </app-product-filter>
        <app-product-list [prodClass]='prodClass' fxFlex.gt-sm="75%" fxFlex.lt-md="75%" fxLayoutAlign="center none">
        </app-product-list>
    </div>
</div>

Section

<div *ngIf="!isCustomerPage" class="chipList">
  <mat-chip-list *ngFor="let submenu of submenus">
    <mat-chip [routerLink]="[submenu.url]"> {{submenu.name}}</mat-chip>
  </mat-chip-list>
</div>

Product List

public products: Product[] = [];
  @Input() prodClass!: number;

  constructor(private productService: ProductService, private filterService: FilterService) {   }

  public getProducts(requestBody: RequestBodyProduct): void {
    this.productService
      .getProducts(requestBody)
      .subscribe((response: ResponseBody) => {
        this.products = response.data;
      });
  }

 ngOnChanges() {
    let requestBody = new RequestBodyProduct(this.prodClass, 0, 0, 0, 0, 0, 'string');
    this.getProducts(requestBody);
  }

Answer 1

Try this:

submenusProduct: SubMenu []= [{
    name: 'Wine',
    id: 4,
  }, {
    name: 'Liquor',
    id: 1,
  },{
    name: 'Beer',
    id: 2,
  },{
    name: 'Foods',
    id: 3,
  }];

In the Section:

<div *ngIf="!isCustomerPage" class="chipList">
  <mat-chip-list *ngFor="let submenu of submenus">
    <mat-chip [routerLink]="['product', submenu.id]"> {{submenu.name}} </mat-chip>
  </mat-chip-list>
</div>

More info in the Angular docs Link Parameters Array section of Routing & Navigation

And observe the route changes:

    constructor(
      .
      .
      private route: ActivatedRoute,
    ) {}

    this.route.params.subscribe(params => { 
      console.log('params: ', params);
      console.log('params.prodClass: ', params.prodClass);
    })
    // instead of: this.prodClass = Number(this.route.snapshot.paramMap.get('prodClass')) || 0;