From a9eeff6be7f11536a7e12ba4330afc303a7ccdce Mon Sep 17 00:00:00 2001
From: Jonas Leder <jonas.leder@jobrouter.com>
Date: Wed, 16 Mar 2022 12:11:58 +0100
Subject: [PATCH] implement anuglar router
---
src/app/app-routing.module.ts | 8 ++++++--
src/app/app.component.html | 12 +++++++-----
src/app/app.component.scss | 3 +++
src/app/app.component.ts | 3 +++
4 files changed, 19 insertions(+), 7 deletions(-)
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 0297262..525ba5c 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -1,10 +1,14 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
+import { BestandComponent } from './bestand/bestand.component';
-const routes: Routes = [];
+const routes: Routes = [
+ { path: '', redirectTo: 'bestand', pathMatch: 'full' },
+ { path: 'bestand', component: BestandComponent },
+];
@NgModule({
- imports: [RouterModule.forRoot(routes)],
+ imports: [RouterModule.forRoot(routes, { useHash: true })],
exports: [RouterModule]
})
export class AppRoutingModule { }
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 665085b..a85ba42 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,8 +1,10 @@
<mat-toolbar>
<span>Lagerverwaltung</span>
</mat-toolbar>
-<mat-tab-group>
- <mat-tab label="Bestand"><app-bestand></app-bestand></mat-tab>
- <mat-tab label="Buchung"> Buchung </mat-tab>
- <mat-tab label="Neu"> Neu </mat-tab>
-</mat-tab-group>
+<nav mat-tab-nav-bar mat-stretch-tabs>
+ <a mat-tab-link *ngFor="let link of links; index as i"
+ [href]="link"
+ (click)="activeLink = link"
+ [active]="activeLink == link"> {{titles[i]}} </a>
+</nav>
+<router-outlet></router-outlet>
\ No newline at end of file
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index e69de29..fdadeb8 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -0,0 +1,3 @@
+nav {
+ max-width: 100%;
+ }
\ No newline at end of file
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index ce3bd56..cd620f7 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -6,5 +6,8 @@ import { Component } from '@angular/core';
styleUrls: ['./app.component.scss']
})
export class AppComponent {
+ links = ['#/bestand', '#/buchung', '#/neu'];
+ titles = ['Bestand', 'Buchung', 'Neu'];
+ activeLink = this.links[1];
title = 'Lagerverwaltung';
}
--
GitLab