GovAlta
[Bug]: AppHeader not updating current selection when using routerLink
Describe the bug
When using routerLink, the blue line above the currently selected item does not get updated when a new item is clicked. This same behaviour can also be seen if you use a click event on an a tag instead of the standard href.
I am using web-components v1.20.2 and angular-components v3.0.2.
Provide Code
<goa-microsite-header [type]="stage" [version]="environment" />
<div class="parent-container">
<div style="max-width: var(--header-width-max); margin: 0 auto;">
<goa-app-header heading="{{ title }}" url="/">
<a routerLink="/">Home</a>
<goa-app-header-menu heading="Services">
<a routerLink="/">Title</a>
<a routerLink="/">Volume Data Agreement</a>
</goa-app-header-menu>
<a routerLink="/">Contact Us</a>
<a *ngIf="(isLoggedIn$ | async) === false" (click)="signInLocal($event)">Sign In</a>
</goa-app-header>
</div>
</div>
signInLocal(event: any) {
this.router.navigateByUrl('/', { state });
}
To Reproduce
You may need to update the links in the above code to point to actual locations in your testing app.
With the code provided, click on the "Contact us" link and notice that the indicator doesn't change. Clicking on any of the other items exhibit the same behaviour.
Note that refreshing the page does update the indicator.
What browsers are you seeing the problem on?
Chrome, Edge
Additional context
Changing the attribute from routerLink to href allows the indicator to update on click, but in angular, this will cause the entire page to refresh. This is also seen on our website, using React, so not an Angular only issue, and not necessarily related to routerLink
Additionally, for mobile resolutions, when clicking the Sign In button in the expanded Menu, the drop down doesn't automatically collapse after clicking. It takes me to the page, but the menu stays expanded
