On routerLinkActive="active" change the color of child mat-icon inside button

routerlinkactive stackblitz
routerlinkactive not working
routerlinkactive css
routerlinkactive child routes
routerlinkactive multiple routes
routerlinkactive home always active
router link active angular 4
routerlinkactive without routerlink

I have a header on my webpage with an item list and every item has a mat-icon child in it. Below is one of the items.

<a [routerLink]="[ '/admin' ]" > 
   <button routerLink="['/admin']" routerLinkActive="active">
       <mat-icon color="warn">history</mat-icon>Audit
   </button>
</a>

The CSS on routerLinkActive="active" works fine on the button text, but I also want to change the color of mat-icon, but nothing seems to work

Easiest way is to add this in your CSS -- probably best is to add it globally:

.active .mat-icon{
   color: inherit;
}

RouterLinkActive in Angular, To add a certain class based on if a certain route is active, we can use routerLinkActive. For our links, we can add the following: <ul class="nav navbar- nav">� The RouterLinkActive is a directive for adding or removing classes from an HTML element that is bound to a RouterLink.Using this directive, we can toggle CSS classes for active Router Links based on the current RouterState.

The RouterLinkActive exports a variable to the template, and has a property that tells you what the active state currently is.

https://angular.io/api/router/RouterLinkActive#properties

https://github.com/angular/angular/blob/ead169a4022e2a2f5520e1c1a58f30692b90f7cd/packages/router/src/directives/router_link_active.ts#L77

   <button routerLink="['/admin']" routerLinkActive="active" #rla="routerLinkActive">
      <mat-icon [color]="rla.isActive && 'warn'">history</mat-icon>Audit
  </button>

The above will set the color to warn if the property isActive of the routerLinkActive is true.

Router Links: Active ― Scotch.io, With the new Angular router, you can add a [routerLinkActive]="['your-class-name ']" attribute to all your links: <a [routerLink]="['/home']"� RouterLinkActive does chunk the current route and try to match it's parts with the RouterLinks you've provided. With that in mind, route / will be matched anywhere as it's the very parent for all the other routes (like /about , /contact , etc. as it consist of / + route-path ).

Looking at this answer, you could do something like this

<a [routerLink]="[ '/admin' ]" > 
   <button routerLink="['/admin']" routerLinkActive="active" #rla="routerLinkActive">
       <mat-icon [ngClass]="{'color': rla.isActive ? 'warn' : 'primary'}">history</mat-icon>Audit
   </button>
</a>

or this

<a [routerLink]="[ '/admin' ]" > 
   <button routerLink="['/admin']" routerLinkActive="active" #rla="routerLinkActive">
       <mat-icon [ngStyle]="{'color': rla.isActive ? 'warn' : 'primary'}">history</mat-icon>Audit
   </button>
</a>

note that these answers are untested

In Angular, how do you determine the active route?, The routerLinkActive is an instruction to add the active class of CSS when an element routerlink is active. The routerLinkActive attribute, which� To help in adding and removing classes depending on the currently active route Angular provides another directive called routerLinkActive. A routerLinkActive directive is associated with a route through a routerLink directive.

routerlinkactive, While making use of dynamic routes in our Angular projects, in some cases, we want the routes to take the active class when they match� RouterLinkActive and RouterLinkActiveOptions in Angular 8 | Angular 8 Tutorial in Hindi | Part- 22 #RouterLinkActive #RouterLinkActiveOptions #Angular8 #AngularTutorial #AngularTutorialinHindi

Using routerLinkActive method in dynamic routes with Angular 9, Toggle light/dark theme. Toggle Zen Mode. Project. Download Project. Info. Starter project for Angular apps that exports to the Angular CLI. 9.0k. 39. Files. src . Angular is a platform for building mobile and desktop web applications. Join the community of millions of developers who build compelling user interfaces with Angular.

angular-router-link-active, For my navigation bar, the li is given the class of "active" (using routerLinkActive) if that is the current page. This is fine if I know what the colour is in order to style� In our intro to the Angular router, we briefly saw how to navigate to a different route declaratively using the RouterLink directive. This post builds on that to demonstrate a few more examples, as well as how to navigate imperatively in the component class.

Comments
  • Try something like the following: [color]="condition ? 'primary' : 'warn'"
  • Thanks, please do select it as the best answer if you believe it was.
  • Should the color change dynamically?
  • @al.koval assuming that active is a boolean, this should change dynamically
  • active is not a template variable. It is the string to assign to the class attribute of the button.
  • @Reactgular thanks for the clarity, I haven't used active router before. Using this link I updated my answer