Angular Routing Setup (Standalone)

In this Tutorial, we will set up routing and add routes to the app.routes.ts file.

1. Open src/app/app.routes.ts

Now, you will see that we will add code below into the app.routes.ts file.

import { Routes } from '@angular/router';
import { UserListComponent } from './user-list/user-list.component';
import { UserFormComponent } from './user-form/user-form.component';

export const routes: Routes = [
  { path: '', component: UserListComponent },
  { path: 'add-user', component: UserFormComponent },
  { path: 'edit-user/:id', component: UserFormComponent }
];

2. Add RouterLink in navbar

Now, we will add routeLink instead of href

<nav class="navbar navbar-dark bg-primary px-3">
  <a class="navbar-brand" href="#">User CRUD</a>
  <div>
    <a class="btn btn-light ms-2" routerLink="/">Users</a>
    <a class="btn btn-warning ms-2" routerLink="/add-user">Add User</a>
  </div>
</nav>

3. Check Routes

http://localhost:4200
http://localhost:4200/add-user