How to make Angular `routerLink` fragment navigation scroll to my `id` target?

Can someone please help me to get the routerLink fragment scroll to work?

=> "Working" meaning that when I click on the routerLink, it does scroll to the element with the matching id.

Code example of what I did:

<co-trigger routerLink="." [fragment]="item?.id" *ngFor="let item of items">Trigger</co-trigger>
...
<co-target [attr.id]="item?.id" *ngFor="let item of items">Target</co-target>


Notes:

• Both the co-trigger and the co-target are in the same template.
• Some co-target instances have enough content so that there is a scroll bar to make it meaningful to scroll to that item by clicking on the trigger.
• The url in the navigation bar changes as expected url#item-id, however no scroll happens when clicking on the trigger.

My AppRoutingModule setup:

@NgModule({
imports: [
RouterModule.forRoot(
routes,
{
onSameUrlNavigation: 'reload',
anchorScrolling: 'enabled',
scrollPositionRestoration: 'enabled',
scrollOffset: [0, 64], // [x, y] - adjust scroll offset
}
),
],
exports: [RouterModule]
})
export class AppRoutingModule {
}


Context information:

Angular: 11.2.6


Any ideas on what I can do to get the "scroll to anchor target" functionality to work?

Continue reading...