Replace header.component.html href attributes with AngularRouter routerLink (#1)

* Replace header.component.html href attributes with AngularRouter routerLink

* Update changelog

Co-authored-by: Matthias Frey <matthias.frey@flowable.com>
Co-authored-by: Thomas <4159106+dtslvr@users.noreply.github.com>

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Changed
+
+- Changed the routing to `routerLink` for an improved navigation experience
+
 ## 0.85.0 - 12.04.2021
 
 ### Changed

apps/client/src/app/components/header/header.component.html

@@ -1,12 +1,12 @@
 <mat-toolbar class="p-0">
   <ng-container *ngIf="user">
-    <a href="/" class="no-min-width px-2" mat-button>
+    <a [routerLink]="['/']" class="no-min-width px-2" mat-button>
       <gf-logo></gf-logo>
     </a>
     <span class="spacer"></span>
     <a
       class="d-none d-sm-block"
-      href="/"
+      [routerLink]="['/']"
       i18n
       mat-flat-button
       [color]="currentRoute === 'home' ? 'primary' : null"
@@ -14,7 +14,7 @@
     >
     <a
       class="d-none d-sm-block mx-1"
-      href="/analysis"
+      [routerLink]="['/analysis']"
       i18n
       mat-flat-button
       [color]="currentRoute === 'analysis' ? 'primary' : null"
@@ -22,7 +22,7 @@
     >
     <a
       class="d-none d-sm-block mx-1"
-      href="/report"
+      [routerLink]="['/report']"
       i18n
       mat-flat-button
       [color]="currentRoute === 'report' ? 'primary' : null"
@@ -30,7 +30,7 @@
     >
     <a
       class="d-none d-sm-block mx-1"
-      href="/transactions"
+      [routerLink]="['/transactions']"
       i18n
       mat-flat-button
       [color]="currentRoute === 'transactions' ? 'primary' : null"
@@ -39,7 +39,7 @@
     <a
       *ngIf="canAccessAdminAccessControl"
       class="d-none d-sm-block mx-1"
-      href="/admin"
+      [routerLink]="['/admin']"
       i18n
       mat-flat-button
       [color]="currentRoute === 'admin' ? 'primary' : null"
@@ -47,7 +47,7 @@
     >
     <a
       class="d-none d-sm-block mx-1"
-      href="/resources"
+      [routerLink]="['/resources']"
       i18n
       mat-flat-button
       [color]="currentRoute === 'resources' ? 'primary' : null"
@@ -55,7 +55,7 @@
     >
     <a
       class="d-none d-sm-block mx-1"
-      href="/about"
+      [routerLink]="['/about']"
       i18n
       mat-flat-button
       [color]="currentRoute === 'about' ? 'primary' : null"
@@ -119,7 +119,7 @@
       </ng-container>
       <a
         class="d-block d-sm-none"
-        href="/analysis"
+        [routerLink]="['/analysis']"
         i18n
         mat-menu-item
         [ngClass]="{ 'font-weight-bold': currentRoute === 'analysis' }"
@@ -127,7 +127,7 @@
       >
       <a
         class="d-block d-sm-none"
-        href="/report"
+        [routerLink]="['/report']"
         i18n
         mat-menu-item
         [ngClass]="{ 'font-weight-bold': currentRoute === 'report' }"
@@ -135,7 +135,7 @@
       >
       <a
         class="d-block d-sm-none"
-        href="/transactions"
+        [routerLink]="['/transactions']"
         i18n
         mat-menu-item
         [ngClass]="{ 'font-weight-bold': currentRoute === 'transactions' }"
@@ -143,7 +143,7 @@
       >
       <a
         class="align-items-center d-flex"
-        href="/account"
+        [routerLink]="['/account']"
         i18n
         mat-menu-item
         [ngClass]="{ 'font-weight-bold': currentRoute === 'account' }"
@@ -153,7 +153,7 @@
       <a
         *ngIf="canAccessAdminAccessControl"
         class="d-block d-sm-none"
-        href="/admin"
+        [routerLink]="['/admin']"
         i18n
         mat-menu-item
         [ngClass]="{ 'font-weight-bold': currentRoute === 'admin' }"
@@ -162,7 +162,7 @@
       <hr class="m-0" />
       <a
         class="d-block d-sm-none"
-        href="/resources"
+        [routerLink]="['/resources']"
         i18n
         mat-menu-item
         [ngClass]="{ 'font-weight-bold': currentRoute === 'resources' }"
@@ -170,7 +170,7 @@
       >
       <a
         class="d-block d-sm-none"
-        href="/about"
+        [routerLink]="['/about']"
         i18n
         mat-menu-item
         [ngClass]="{ 'font-weight-bold': currentRoute === 'about' }"
@@ -183,7 +183,7 @@
   <ng-container *ngIf="user === null">
     <a
       *ngIf="currentRoute && currentRoute !== 'start'"
-      href="/"
+      [routerLink]="['/']"
       class="mx-2 no-min-width px-2"
       mat-button
     >
@@ -192,7 +192,7 @@
     <span class="spacer"></span>
     <a
       class="d-none d-sm-block mx-1"
-      href="/about"
+      [routerLink]="['/about']"
       i18n
       mat-flat-button
       [color]="currentRoute === 'about' ? 'primary' : null"

apps/client/src/app/components/header/header.module.ts

@@ -7,6 +7,7 @@ import { MatToolbarModule } from '@angular/material/toolbar';
 import { LoginWithAccessTokenDialogModule } from '../../pages/login/login-with-access-token-dialog/login-with-access-token-dialog.module';
 import { GfLogoModule } from '../logo/logo.module';
 import { HeaderComponent } from './header.component';
+import { RouterModule } from '@angular/router';
 
 @NgModule({
   declarations: [HeaderComponent],
@@ -17,7 +18,8 @@ import { HeaderComponent } from './header.component';
     LoginWithAccessTokenDialogModule,
     MatButtonModule,
     MatMenuModule,
-    MatToolbarModule
+    MatToolbarModule,
+    RouterModule,
   ],
   providers: [],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]