CODEWITHSUNDEEP
htmlangular
danday74
danday74

Reputation: 57036

Angular how to style routerLink

I've got a lot of table rows in my app. Some are links, some are not. Here is an example of one that is:

<tr [routerLink]="['/invoices', invoice?.invoice.id || 0, 'sms']">

I want to style all tr's with a routerLink like this:

tr[routerLink] {
   cursor: pointer;
}

But it does not work. What is the correct CSS here? thanks

Upvotes: 4

Views: 7507

Answers (5)

Beno&#238;t Pl&#226;tre
Beno&#238;t Pl&#226;tre

Reputation: 626

I think you can rely on this css rule :

a[href^="/"] {
  text-decoration: none;
}

As a routerLink always has a relative path.

Upvotes: 1

moly
moly

Reputation: 433

You can use a directive to add a class to every row with a routerLink attribute. Then style it in the css like normal.

import { Directive, HostBinding } from '@angular/core';

@Directive({
  selector: 'tr[routerLink]'
})
export class ClickableTableRowDirective {

  @HostBinding('class')
  className = 'clickable-table-row';

  constructor() {
        
  }
}

.clickable-table-row {
  cursor: pointer;
}

Upvotes: 1

user4676340
user4676340

Reputation:

Use the compiled attribute ng-reflect-router-link : stackblitz

a[ng-reflect-router-link] {
  color: red;
  font-weight: 700;
}

tr[ng-reflect-router-link] {
  cursor: pointer;
}

Upvotes: 6

Aniket Avhad
Aniket Avhad

Reputation: 4145

In your case the problem because of '[ ]' these brackets

so if you want to indentify which is the link and which is not then try below code

here's is example

<tr [routerLink]="['/invoices', invoice?.invoice.id || 0, 'sms']" routerLinkActive="active>

and in style.css

tr[routerLinkActive] {
    color: red;
 }

here is Stackblitz demo

this style only apply on those are links

Upvotes: 0

Ayoub k
Ayoub k

Reputation: 8868

html: 

<a [routerLink]='link' [ngClass]="{'router-link-active': true">{{name}}</a>

css: 

.router-link-active {
   cursor: pointer;
}

Upvotes: 0

Related Questions