implement active page highlighting

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

src/app/app.component.ts

 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
+      }
+    });
+  }
 }