Styling hypertext links in Angular a:not([href]) when using

Topic: Styling hypertext links in Angular a:not([href]) when using (click) event listeners

rikuwolf priority asked 3 years ago

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?

Add comment

Arkadiusz Idzikowski staff answered 3 years ago

0 1 Best answer

Please insert min. 20 characters.

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 priority commented 3 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.

Please insert min. 15 characters.

Arkadiusz Idzikowski staff commented 3 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.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Priority
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

rikuwolf

7Support score
6Questions 5Answers 0Snippets