From 3376f84454f0ba69f7a1bb79b29548dd0a5fea01 Mon Sep 17 00:00:00 2001
From: Jonas Leder <jonas.leder@jobrouter.com>
Date: Wed, 16 Mar 2022 12:32:46 +0100
Subject: [PATCH] implement active page highlighting
---
src/app/app.component.html | 7 +++----
src/app/app.component.ts | 14 ++++++++++++--
2 files changed, 15 insertions(+), 6 deletions(-)
diff --git a/src/app/app.component.html b/src/app/app.component.html
index a85ba42..1f213cb 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -3,8 +3,7 @@
</mat-toolbar>
<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>
+ [href]="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.ts b/src/app/app.component.ts
index cd620f7..4cbc33e 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,13 +1,23 @@
import { Component } from '@angular/core';
-
+import { Router, ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
+ constructor(public router: Router, public route: ActivatedRoute) {}
+
+ activeLink = "";
links = ['#/bestand', '#/buchung', '#/neu'];
titles = ['Bestand', 'Buchung', 'Neu'];
- activeLink = this.links[1];
title = 'Lagerverwaltung';
+ ngOnInit(){
+ console.log(this.router.url);
+ this.router.events.subscribe((url:any) => {
+ if(url.url != undefined) {
+ this.activeLink = "#" + url.url
+ }
+ });
+ }
}
--
GitLab