My a tag links aren't working in my app.component.html file for my angular project

Right now I'm working with routes and I have a link that's supposed to go to a specific path but for some reason it's not working. When I type the path manually into the search bar of the web browser it works. So, I think it's something in my html. For this website you're supposed to be able to click a link on the side bar which makes a certain category of the ecommerce shop products appear. There's also zero compiler errors. This is my html:

<div class="page-wrapper">

<!-- MENU SIDEBAR-->
<aside class="menu-sidebar d-none d-lg-block">
<div class="logo">
<a href="#">
<img src="assets/images/logo.png" alt="luv2shop" class="img-responsive">
</a>
</div>
<div class="menu-sidebar-content js-scrollbar1">
<nav class="navbar-sidebar">
<ul class="list-unstyled navbar-list">
<li>
<a routerLink="/category/1" routerLinkActive="active-link">Books</a>
</li>
<li>
<a routerLink="/category/2" routerLinkActive="active-link">Coffee Mugs</a>
</li>
</ul>
</nav>
</div>
</aside>
<!-- END MENU SIDEBAR-->

<div class="page-container">
<!-- HEADER DESKTOP-->
<header class="header-desktop">
<div class="section-content section-content-p30">
<div class="container-fluid">
<div class="header-wrap">
<form class="form-header" onsubmit="return false;" method="GET">
<input class="au-input au-input-xl" type="text" name="search" placeholder="Search for data ..." />
<button class="au-btn-submit" type="submit">
Search
</button>
</form>
<div class="cart-area d-n">
<a href="shopping-detail.html">
<div class="total">19.22 <span> 2</span> </div> <i class="fa fa-shopping-cart" aria-hidden="true"></i>
</a>
</div>
</div>
<div class="account-wrap"></div>
</div>
</div>
</header>
<!-- END HEADER DESKTOP-->

<!-- MAIN CONTENT-->
<router-outlet></router-outlet>>

</div>
</div>

<!-- ENDS PAGE CONTAINER -->

<footer>
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Help</a></li>
</ul>
</footer>


Services component:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Product } from '../common/product';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable({
providedIn: 'root'
})
export class ProductService {
private baseUrl = 'http://localhost:8080/api/products';
constructor(private httpClient: HttpClient) { }

getProductList(theCategoryId: number): Observable<Product[]> {

//need to build URL based on category id
const searchUrl = `${this.baseUrl}/search/findByCategoryId?id=${theCategoryId}`;

return this.httpClient.get<GetResponse>(searchUrl).pipe(
map(response => response._embedded.products)
);
}
}
interface GetResponse{
_embedded: {
products: Product[];
}
}


Product-List Component:

import { Component, OnInit } from '@angular/core';
import { ProductService } from '../../services/product.service';
import { Product } from '../../common/product';
import { CommonModule } from '@angular/common';
import { ActivatedRoute } from '@angular/router';

@Component({
selector: 'app-product-list',
imports: [CommonModule],
templateUrl: './product-list-grid.component.html',
styleUrl: './product-list.component.css'
})
export class ProductListComponent implements OnInit{
products: Product[] = [];
currentCategoryId: number = 1;

constructor(private productService: ProductService,
private route: ActivatedRoute) { }

ngOnInit() {
this.route.paramMap.subscribe(() => {
this.listProducts();
});
}

listProducts() {

// check if "id" parameter is available
const hasCategoryId: boolean = this.route.snapshot.paramMap.has('id');

if (hasCategoryId) {
// get the "id" param string. convert string to a number using the "+" symbol
this.currentCategoryId = +this.route.snapshot.paramMap.get('id')!;
}
else {
// not category id available ... default to category id 1
this.currentCategoryId = 1;
}

// now get the products for the given category id
this.productService.getProductList(this.currentCategoryId).subscribe(
data => {
this.products = data;
}
)
}
}

Continue reading...