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