Exploring the world of Angular and delving into its usage of CSS has raised a question in my mind. As far as I understand, a component in Angular strictly adheres to the CSS styles declared within it and remains unaffected by any external CSS rules.
The specific component in focus is called MainNavComponent.
Component({
selector: 'main-nav',
templateUrl: './main-nav.component.html',
styleUrls: ['./main-nav.component.css']
})
export class MainNavComponent implements OnInit, OnDestroy {...
Within the application, there exists a slide-out menu housing navigation link buttons. Clicking on a button triggers a background color change, which successfully stays intact when hovering over other buttons, except for one anomaly.
Let's take a look at the troublesome button's HTML:
<a mat-list-item (click)= "customerRoute()" >
Customer
</a>
In the ./main-nav.component.css file, only the following CSS properties are applied to the .mat-list-item class:
.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;
}
All buttons seem to behave as expected except for the problematic one. Despite not finding any CSS affecting hover, active, focus or visited states, I wonder if an imported bootstrap.js file might be controlling the nav link button background color?
To try and align the troublesome button with the rest, I attempted adding the following CSS to the ./main-nav.component.css file:
.mat-list-item:active {
background-color: #f1f1f1 !important;
}
Unfortunately, this had no discernible impact. I also experimented with :focus and :visited selectors but to no avail.
EDIT
A new revelation suggests that the issue lies with the implementation of routerLink. When altering the HTML to include routerLink like so:
<a mat-list-item routerLink="/Customers" >
Customers
</a>
The functionality works flawlessly. However, this restricts me to a single route. The JavaScript function invoked by (click) dynamically determines the route based on certain conditions before using the TypeScript snippet below to navigate:
customerRoute() {
this.router.navigateByUrl(this.routeLink);
}
This indicates that taking a different route navigation approach rather than utilizing routerLink leads to the described problem.
Looking for any insights or suggestions to overcome this obstacle!