In my application, I'm navigating from home to banner component. Then anchor tag in a banner component not getting focus on tab click prior to the footer anchor tag.
And yes I want to focus anchor tag on tab click, not on the page load.
when I refresh a banner component it works fine. The problem comes when a user navigates from home to the banner component then it's not working properly.
There is running demo app.
app.module.ts@NgModule({
imports: [
BrowserAnimationsModule,
RouterModule.forRoot([
{
path: '',
component: HomeComponent
},
{
path: 'banner',
component: BannerComponent,
}
]
) ],
declarations: [ AppComponent,HomeComponent,BannerComponent],
bootstrap: [ AppComponent ]
})
export class AppModule { }
app.component.ts
@Component({
selector: 'my-app',
template: `
<router-outlet></router-outlet>
<div>
<a href="https://www.google.com" target="_blank">footerLink</a>
</div>
`
})
export class AppComponent {
name = 'Angular';
}
home.component.ts
@Component({
template: `
<button routerLink="/banner">Banner</button>`
})
export class HomeComponent {
}
banner.component.ts
@Component({
template: `
<button routerLink="/banner">Banner</button>`
})
export class HomeComponent {
}
✔ If a user clicks on a banner button and then click the tab on the next('/banner') page. In that case, 'BannerLink' anchor should be a highlight.
✘ Currently clicking on the tab on next('/banner') page focusing FooterLink anchor tag
Edit
I found an issue,
this is happening because of BrowserAnimationsModule, If I replace with BrowserModule it works fine, now why this is happening with BrowserAnimationsModule module?
