Posts

Showing posts from April, 2024

Using routerLinkActive in Angular 17

Image
I'm re-writing an Angular app using Angular 17, which is a departure from the architecture of previous versions of Angular. If you found my page, than it's likely that you are trying to use routerLinkActive, and it's not working.  In Angular, routerLinkActive allows you to apply one or more CSS classes to an element if the element matches a route.  < a mat-button   routerLink = "/Home" routerLinkActive = "active" >< mat-icon > home </ mat-icon > Home </ a > In this example, when Angular route is set to "/Home", the <a> element will essentially be <a class="active"> So in your CSS file, which is in the same folder as your component, you need to define a class rule that tells the browser how to style the element.  In my case, my CSS file is top-nav.compenent.scss and I've added this rule: .active {   background-color : darken ( orange , 25% );   border-radius : 10px 10px 0 0 ;   color : b