3

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 the "active" class. However how do I approach this if I need to style the "active" li with inline styles? I have an html colour coming in from an api so this is why I need to put it inline. Currently I have:

<li routerLinkActive="active"><a [routerLink]="['/blah']">Blah</a></li>

Which just works with the preset defined ".active" class. How can I do something like the below which will style it with inline styles?

<li routerLinkActive="active" [ngStyle]="if active{{'color': color}}"><a [routerLink]="['/blah']">Blah</a></li>

Thanks for everyones help so far but the suggested post wouldn't be able to help me since using routerLinkActive isn't really an active variable to work within the typescript ecosystem.

Andrew Howard
  • 2,818
  • 5
  • 33
  • 59
  • 2
    Possible duplicate of [Combine \[NgStyle\] With Condition (if..else)](https://stackoverflow.com/questions/37051496/combine-ngstyle-with-condition-if-else) – Christopher Moore Aug 03 '17 at 09:17

1 Answers1

2

I ran into the same need.

You can add "active" conditinal style like this:

<li #rla="routerLinkActive" 
    routerLinkActive
    [routerLink]="['/blah']" 
    [ngStyle]="rla.isActive ? {'color': active_color} : {'color': inactive_color}">
    <a>Blah</a>
</li>
FabiF
  • 2,796
  • 2
  • 18
  • 27