Angular not obeying css

Question

I'm new to Angular and have a question regarding its use of css. My understanding is that a component obeys only the css within it and is not interfered with by css in any other parts of the program.

I have a component called MainNavComponent.

Component({
  selector: 'main-nav',
  templateUrl: './main-nav.component.html',
  styleUrls: ['./main-nav.component.css']
})
export class MainNavComponent implements OnInit, OnDestroy {...

There is a slideout menu in the app that contains nav link buttons. When a button is clicked, its background changes to a different color. Then when you hover over the other buttons, the selected button's background color does not change. That works for all buttons but one.

Here is the bad button's html:

    <a mat-list-item (click)= "customerRoute()" >
        Customer
    </a>

In the ./main-nav.component.css file, the only css applied to the mat-list-item class is this:

.mat-nav-list,
.mat-list-item {
    padding-top: 0 !important;
    font-size: 15px !important;
    color: #444444 !important;
    font-family: "HelveticaNeueW01-55Roma" !important;
}

.mat-list-item h2.mat-line {
    font-size: 18px !important;
    font-weight: 200;
    line-height: 1.35em;
    color: #263746 !important;
    font-family: "HelveticaNeueW01-45Ligh" !important;
  }
  
  .mat-list-item p.mat-line {
    font-size: 14px !important;
    font-family: "HelveticaNeueW01-45Ligh" !important;
  }

And every button works as intended except one. I don't see anything there that controls the hover, active, focus or visited events, so I'm at a loss as to why it works on any of the link buttons at all. My only theory is that I see a bootstrap.js file being imported somewhere. Could it be controlling the nav link button background color?

Anyway, I tried to force the bad one to do what the good buttons are doing by adding the following css to the ./main-nav.component.css file:

.mat-list-item:active {
    background-color: #f1f1f1 !important;
}

But it had no affect. I also tried focus and visited. They also had no affect.

EDIT

I've learned that it has something to do with routerLink. If I change the html to this:

    <a mat-list-item routerLink="/Customers" >
        Customers
    </a>

Then it works correctly. But then I'm stuck with only one route. The javascript that the (click) calls causes the route to change depending on certain conditions. Once the correct route is determined, it then uses the following typescript to navigate to it:

  customerRoute() {
    this.router.navigateByUrl(this.routeLink);
  }

So something about navigating this way, instead of using routerLink, causes the problem I have described.

Any suggestions?

Answer 1

This is no valid mat-list-item:

<a mat-list-item (click)= "customerRoute()" >
        Customer
    </a>

Try something like this:

<mat-list-item><a (click)= "customerRoute()" >
        Customer
    </a></mat-list-item>

Also consider to use the router function for links. Like...

<a [routerLink]="['/customer']">Customer</a>

Answer 2

I figured it out. For some unknown reason, I had to add routerLink="."

    <a mat-list-item routerLink="." (click)= "customerRoute()" >
        Customers
    </a>