Website Navigation Routing

src/app/app-routing.module.ts

@@ -5,7 +5,7 @@ import {routes} from "./app.routes";
 
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes)],
+  imports: [RouterModule.forChild(routes)],
   exports: [RouterModule]
 })
 export class AppRoutingModule { }

src/app/app.component.html

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

src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.html

@@ -1,3 +1,5 @@
+<div class="d-flex flex-col" style="height: 100%;">
+<app-navigation-bar></app-navigation-bar>
 <div class="container">
   <div class="header">
     <div class="dropdown position-absolute top-0 end-0 m-3">
@@ -47,3 +49,4 @@
     </tbody>
   </table>
 </div>
+</div>

src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.ts

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

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

@@ -5,18 +5,13 @@
     </a>
     <hr>
     <ul class="nav nav-pills flex-column mb-auto">
-      <li class="nav-item">
-        <a href="#" class="nav-link active text-black" aria-current="page">
-          Dashboard
-        </a>
-      </li>
       <li>
-        <a routerLink="/mitarbeiter" class="nav-link text-black">
+        <a routerLink="/mitarbeiter"  routerLinkActive="active"  class="nav-link text-black">
           Mitarbeiterverwaltung
         </a>
       </li>
       <li>
-        <a routerLink="/qualifikationbearbeiten" class="nav-link text-black">
+        <a routerLink="/qualifikationbearbeiten"  routerLinkActive="active"  class="nav-link text-black">
           Qualifikationsverwaltung
         </a>
       </li>

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

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

src/app/components/qualifikaton-bearbeiten-view/qualifikaton-bearbeiten-view.component.html

@@ -1,3 +1,5 @@
+<div class="d-flex flex-col" style="height: 100%;">
+  <app-navigation-bar></app-navigation-bar>
   <div class="container">
     <button class="back-button">Back</button>
 
@@ -33,4 +35,4 @@
 
     <button class="save-button">Save</button>
   </div>
-
+</div>

src/app/components/qualifikaton-bearbeiten-view/qualifikaton-bearbeiten-view.component.ts

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