I have encountered an issue where divs using routerLink get bordered with blue when clicked. I think I am missing something very obvious, possibly even a configuration I have in my browser or some missed css styling, so a polite explanation of the fix would be appreciated if so.
I've put together a basic demo of the issue here - https://github.com/DavidStreid/routingIssue. The code snippet creating this issue is at src/app/allGreetings.component.html and I put it below. Just download and "npm install; npm start" from the root, /routingIssue, to see the issue by clicking on the different greetings. I'm seeing this in chrome.
<div *ngFor="let greeting of greetings"
class="col-xs-12 col-md-6 col-lg-4">
<div class="paddingDiv"
[routerLink]="greeting.routerLink">
<h3 class="greetingType">{{greeting.title}}</h3>
</div>
</div>
EDIT: Here's an updated version from unitario's suggestion where I still see the blue border -
<a *ngFor="let greeting of greetings"
class="col-xs-12 col-md-6 col-lg-4">
<a class="paddingDiv"
(click)="onSelect(greeting)">
<h3 class="greetingType">{{greeting.title}}</h3>
</a>
</a>
SOLUTION: From Shota Papiashvili. The outline comes from the focus selector. I don't want the border so I eliminated it and added another focus style -
.paddingDiv:focus {
outline: 0;
background-color: black;
}
Yes it can be attached to div tag, your route is probably wrong try add / in front of route.
Linking Routes in HTMLTo add links to one of the routes, use the routerLink directive in HTML. This directive accepts an array. The first parameter is the name of the route, and the second parameter is the parameters that you want to pass with the route.
Href is the basic attribute provided by Html to navigate through pages which reloads the page on click. routerLink is the attribute provided by angular to navigate to different components without reloading the page.
RouterLink for dynamic dataDynamic data or user-defined objects can be passed from Angular version 7.2 using the state object stored in History API. The state value can be provided using the routerLink directive or navigateByURL.
its css outline property, this is very important for accessibility, you can read more at: http://www.outlinenone.com/
if you still want to do it just add
.paddingDiv:focus {
outline: 0;
}
to your css
Not sure which version of the router your are using but since version 3 you cannot use routerLink
on any other elements than a
or button
.
If you need to use it in a div
then use a click
event together with Router
and navigate
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With