A very common markup in Angular version of bootstrap directives goes like this: <a (click)="prev()">Previous</a>
Pure bootstrap version would have an “empty” href (<a (click)="prev()" href="#">Previous</a>) to provide appropriate styling (cursor) but this is not needed in ng-version and can interfere with routing.
The question: how do we deal with this situation? Few ideas:
- pass
$eventand callpreventDefault()on it; this is what we do in the accordion, for example: https://github.com/ng-bootstrap/core/blob/1d912de06578aca1eaea9ad69942978090da43ff/src/accordion/accordion.ts#L42 - remove
hrefaltogether and add cursor styling through CSS (this would be quite easy with ng2 since we’ve got styles encapsulation) - try to convince bootstrap folks to “fix it” <- not even sure it makes sense
Now, I must admit that I don’t know what is the impact of removing href on accessibility and keyboard navigation, so the encapsulated CSS path might be a non-option in the end…
Thoughts?
This is what we do at Thomson Reuters:
<a (click)="prev()" href>Previous</a>The
href, even when truly empty like this, keeps the anchor focusable and in tabindex. This is essential for A11y.OK, another idea. How about this:
href(this gives us proper cursor and accessibility)To avoid pain of writing too much for prevent default we could use this trick:
<a href (click)="!!doSth()">. Taken from angular/angular#2042 (comment)