add router link active to icon buttons

Author: konrad2002

src/app/app.component.spec.ts

@@ -14,16 +14,4 @@ describe('AppComponent', () => {
     expect(app).toBeTruthy();
   });
 
-  it(`should have the 'SwimResultsHelperApplication' title`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app.title).toEqual('SwimResultsHelperApplication');
-  });
-
-  it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, SwimResultsHelperApplication');
-  });
 });

src/app/layout/element/icon-button/icon-button.component.html

@@ -1,3 +1,3 @@
-<button (click)="onClick($event)">
+<button (click)="onClick($event)" routerLinkActive="active" [routerLink]="btnRouterLink">
   <mat-icon>{{icon}}</mat-icon>
 </button>

src/app/layout/element/icon-button/icon-button.component.scss

@@ -18,4 +18,9 @@ button {
   &:hover {
     filter: brightness(1.3);
   }
+
+  &.active {
+    filter: brightness(1.3);
+    color: cornflowerblue;
+  }
 }

src/app/layout/element/icon-button/icon-button.component.ts

@@ -1,16 +1,20 @@
 import {Component, EventEmitter, Input, Output} from '@angular/core';
 import {MatIcon} from '@angular/material/icon';
+import {RouterLink, RouterLinkActive} from '@angular/router';
 
 @Component({
   selector: 'app-icon-button',
   imports: [
-    MatIcon
+    MatIcon,
+    RouterLinkActive,
+    RouterLink
   ],
   templateUrl: './icon-button.component.html',
   styleUrl: './icon-button.component.scss'
 })
 export class IconButtonComponent {
   @Input() icon: string = "dashboard";
+  @Input() btnRouterLink?: string;
 
   @Output() btnClicked = new EventEmitter<PointerEvent>();
 

src/app/layout/sidebar/sidebar.component.html

@@ -5,5 +5,5 @@
   <li><app-icon-button icon="upload"></app-icon-button></li>
   <li><app-icon-button icon="file_map"></app-icon-button></li>
   <hr>
-  <li><app-icon-button icon="live_tv" (btnClicked)="onOldLive()"></app-icon-button></li>
+  <li><app-icon-button icon="live_tv" btnRouterLink="/old"></app-icon-button></li>
 </ul>