diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 02972627f8df364102ce4ede71c8bd5f3660e1d8..525ba5cb7e525951544761aba431a604c1a3ff7c 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 665085b4e3f04f98b7eab3bbfad32bdfca11d8d5..a85ba427d3695e6f308c1be2bbd9d7b403e29fc7 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 e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..fdadeb80139cc3a7eaaf2469f20bb05dc120381b 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 ce3bd5623f8964b3bc46bfde2894689baf5c73d0..cd620f70f0e3556f8bf323dc4ebe000871e1da27 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'; }