Website Navigation Routing

src/app/app-routing.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import {routes} from "./app.routes";
+
+
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }

src/app/app.component.html

@@ -1 +1 @@
-<router-outlet></router-outlet>
+<app-employee-detail></app-employee-detail>

src/app/app.component.ts

@@ -1,25 +1,26 @@
-import {Component} from '@angular/core';
+import { Component } from '@angular/core';
-import {RouterOutlet} from '@angular/router';
+import {RouterModule, RouterOutlet} from '@angular/router';
 import {LoginViewComponent} from "./components/login-view/login-view.component";
 import {
   MitarbeiterverwaltungViewComponent
 } from "./components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component";
 
-import {NavigationBarComponent} from './components/navigation-bar/navigation-bar.component';
+import { NavigationBarComponent } from './components/navigation-bar/navigation-bar.component';
-import {EmployeeDetailComponent} from './components/employee-detail/employee-detail.component';
+import { EmployeeDetailComponent } from './components/employee-detail/employee-detail.component';
 import {
   MitarbeiterBearbeitenViewComponent
 } from "./components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component";
 import {
   QualifikatonBearbeitenViewComponent
 } from "./components/qualifikaton-bearbeiten-view/qualifikaton-bearbeiten-view.component";
+import {AppRoutingModule} from "./app-routing.module";
 import {QualifikatonDetailComponent} from "./components/qualifikaton-detail/qualifikaton-detail.component";
 
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, NavigationBarComponent, EmployeeDetailComponent, LoginViewComponent, MitarbeiterverwaltungViewComponent, MitarbeiterBearbeitenViewComponent, QualifikatonBearbeitenViewComponent, QualifikatonDetailComponent],
+  imports: [AppRoutingModule, RouterModule, RouterOutlet, NavigationBarComponent, EmployeeDetailComponent, LoginViewComponent, MitarbeiterverwaltungViewComponent, MitarbeiterBearbeitenViewComponent, QualifikatonBearbeitenViewComponent, QualifikatonDetailComponent],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css'
 })

src/app/components/navigation-bar/navigation-bar.component.html

@@ -1,5 +1,5 @@
 <div class="d-flex flex-column flex-shrink-0 p-3 text-bg-light border-end border-primary" style="width: 300px; height: 100%;">
-    <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-black text-decoration-none">
+    <a routerLink="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-black text-decoration-none">
       <img src="logo.svg" class="bi pe-none me-2" width="40" height="32"/>
       <span class="fs-4">Hi-Tec GmbH</span>
     </a>
@@ -11,12 +11,12 @@
         </a>
       </li>
       <li>
-        <a href="#" class="nav-link text-black">
+        <a routerLink="/mitarbeiter" class="nav-link text-black">
           Mitarbeiterverwaltung
         </a>
       </li>
       <li>
-        <a href="#" class="nav-link text-black">
+        <a routerLink="/qualifikationbearbeiten" class="nav-link text-black">
           Qualifikationsverwaltung
         </a>
       </li>

src/app/components/navigation-bar/navigation-bar.component.ts

@@ -1,9 +1,12 @@
 import { Component } from '@angular/core';
+import {RouterLink} from "@angular/router";
 
 @Component({
   selector: 'app-navigation-bar',
   standalone: true,
-  imports: [],
+  imports: [
+    RouterLink
+  ],
   templateUrl: './navigation-bar.component.html',
   styleUrl: './navigation-bar.component.css'
 })