What am i doing wrong here?(Anguar Routing) - html

Question

Screenshot
Hey guys, so i am trying to learn Angular by building a simple application that should show the list of categories and create a new category but i am facing a problem, when i click on a link the search bar doesn't change it stays on the home page..
This is the app.component.html:
<ul class = "navbar-nav">
<li class = "nav-item">
<a routerLink="/categories" class="nav-link" ariaCurrentWhenActive="page" >Liste des catégories</a>
</li>
<li class = "nav-item">
<a routerLink="/create-categories" class="nav-link" ariaCurrentWhenActive="page" >Ajout catégorie</a>
</li>
</ul>
</nav>
<div class = "container">
<router-outlet></router-outlet>
</div>
and this is the app-routing-module.ts:
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { CategoriesDetailsComponent } from './intefaces/categories-details/categories-details.component';
import { CategoriesListComponent } from './intefaces/categories-list/categories-list.component';
import { CreateCategoriesComponent } from './intefaces/create-categories/create-categories.component';
import { UpdateCategoriesComponent } from './intefaces/update-categories/update-categories.component';
const routes: Routes = [
{path: 'categories', component: CategoriesListComponent},
{path: 'create-categories', component: CreateCategoriesComponent},
{path: '', redirectTo: 'categories', pathMatch: 'full'},
{path: 'update-categories/:id', component: UpdateCategoriesComponent},
{path: 'categories-details/:id', component: CategoriesDetailsComponent}
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

Answer 1

change this
<a routerLink="/categories" class="nav-link" ariaCurrentWhenActive="page" >Liste des catégories</a>
const routes: Routes = [
{path: 'categories', component: CategoriesListComponent},
{path: 'create-categories', component: CreateCategoriesComponent},
{path: '', redirectTo: 'categories', pathMatch: 'full'},
{path: 'update-categories/:id', component: UpdateCategoriesComponent},
{path: 'categories-details/:id', component: CategoriesDetailsComponent}
];
for this
<a routerLink="categories" class="nav-link" ariaCurrentWhenActive="page" >Liste des catégories</a>
const routes: Routes = [
{path: '', redirectTo: 'categories', pathMatch: 'full'},
{path: 'categories', component: CategoriesListComponent},
{path: 'create-categories', component: CreateCategoriesComponent},
{path: 'update-categories/:id', component: UpdateCategoriesComponent},
{path: 'categories-details/:id', component: CategoriesDetailsComponent}
];