Topic: Styling hypertext links in Angular a:not([href]) when using (click) event listeners
Expected behavior
Text links created with an angular (click) event listener will show the same styles as the same link created with an href.
Actual behavior
Text links created using (click) event listeners lack styles, for example colour.
Resources (screenshots, code snippets etc.)
This shows the correct styles:
<a href="/login">Log in</a>
This has styles missing:
<a (click)="goToLogin()">Log in</a>
The cause of this problem seems to be here:
global.scss
a:not([href]):not([tabindex]), a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover { color: inherit; text-decoration: none; }
reboot.scss
a:not([href]) { color: inherit; text-decoration: none; }
What is the best way to get Angular text links to show the same styling as normal href links? How can we do this without messing around with the vendor files?
Please add this styles to the styles.scss file:
Edit: Added a better temporary solution:
a.mdb-link:not([href]) {
cursor: pointer;
text-decoration: none;
color: #007bff;
transition: all 0.2s ease-in-out;
&:hover {
text-decoration: none;
color: #014c8c;
transition: all 0.2s ease-in-out;
}
&.disabled,
&:disabled {
&:hover {
color: #007bff;
}
}
}
We will discuss that with our design team and see if we should style all links by default.
rikuwolf pro premium priority commented 4 years ago
Yes, please discuss in your design team.
Your solution here is a good start, but it's incomplete. Simply making a rule for the anchor tag will colour all kinds of links (like navbar etc), which we certainly want styled differently from text links.
Also, we'll need related styles for :hover, :active, :visited etc.
Can you post a more complete solution here, until your designers solve this in a more permanent way?
So far, I have made new styles in styles.scss for a.text-link, a.title-link, but I would prefer to stay consistent to the mdb approach if possible.
Arkadiusz Idzikowski staff commented 4 years ago
@rikuwolf I edited my answer and added a better solution. In this case, you will need to add a mdb-link class to the link.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: 10.1.1
- Device: Mac
- Browser: Firefox, Chrome
- OS: Mac OS, Big Sur
- Provided sample code: No
- Provided link: No