ngx-page-scroll
ngx-page-scroll copied to clipboard
PageScroll directive doesn't watch for keyup/keydown on a tag
Shouldn't the PageScroll directive listen to keyup/keydown for when a user might press the enter key to scroll? Our use case is a dynamic list of links, anchor tags, that need to be tabbable and scrolled to when enter is pressed. Its for accessibility . I've tried the scroll service though I get no errors and it doesn't work. Any thoughts?
<!--Floating nav-->
<ng-container *ngFor="let link of links">
<a pageScroll
tabindex="0"
(keyup.enter)="scollOnEnter('#' + link.id)"
[pageScrollOffset]="0"
[pageScrollDuration]="300"
[href]="'#' + link.id">
{{link}}
</a>
</ng-container>
<div class="wrapper">
<mat-card>
<div #targetElement *ngFor=" let car of cars">
</div>
</mat-card>
</div>
And my component
@ViewChild('targetElement')
public targetElement: ElementRef;
public scollOnEnter(target) {
const pageScrollInstance: PageScrollInstance = this.pageScrollService.create({
document: this.document,
scrollTarget: target,
advancedInlineOffsetCalculation: true,
scrollViews: [this.targetElement.nativeElement]
});
this.pageScrollService.start(pageScrollInstance);
}
Hi @mac1253,
the directive listenes for the click
event at the attached object:
https://github.com/Nolanus/ngx-page-scroll/blob/master/projects/ngx-page-scroll/src/lib/ngx-page-scroll.directive.ts#L23
But I do agree that it is better from a usability perspective to also handle key-events makes sense. I'll out that on the feature list to be added in on of the next releases.
The shown code looks ok. Can you reproduce the problem in a plunkr for me?