RouterLink shows hyperlink on screen (below) I don't want to show hyperLink on page

Question

<a routerLink="/dashboard">Dashboard</a> can i remove hyperlink ?

when i use

<button routerLink="/dashboard">Dashboard</button>

it works like what i want

but i want to add routerLinkOptions and it shows button error! my aim is to remove hyperlink from screeen when hovering on link

Answer 1

In your component.css file, add the following CSS class,

.anchor-style {
 text-decoration: none !important;
 cursor: default !important;
}

In your component.html file, add the anchor-style class to your anchor HTML element.

<a class="anchor-style" routerLink="/dashboard">Dashboard</a>

If this does not answer to your query, you can try the following,

1. Apply the RouterLinkActive to an ancestor of a RouterLink.

   <div routerLinkActive="active-link-styles" [routerLinkActiveOptions]="{exact: true}"> <button routerLink="/dashboard">Dashboard</button> <button routerLink="/home">Home</button> </div>

This will set the active-link-styles class on the div tag if the url is either '/dashboard' or '/home'.

2. You can call a function on the click event. Which in turns navigates to the desired screen. In component.html file, <button (click)="navigateToDashboard()">Dashboard</button> In component.ts file, navigateToDashboard() { this.router.navigate(['/dashboard']) }