Clarity: Header - set as active

[b-mi]

Select one ... (check one with "x")

[ ] bug
[x] feature request
[ ] enhancement

Expected behavior

I would like to Header automatically changed 'active' property for clicked link.
Or, how can I programatically change 'active' property?

Actual behavior

Header link have style class 'active' - this is fixed solution, need change class active after user click on header link.

Reproduction of behavior

Behavior is visible on doc page clarity = there are fixed setting for active class and none code or property for change after user click on another link in Header.

• Include a link to the reproduction scenario you created by forking one of the Clarity Plunker Templates:
  
  

Environment details

• Angular version: 4.x.x

• Clarity version: 0.10.8

• OS and version: Win 10

• Browser: [all]

[mathisscott]

Angular allows you to bind to classnames like any other attribute. You can use [class.active]="blah" or [ngClass]="{ active: blah)" for example.

You can read more about this in the Angular docs

[b-mi]

Ok, but I think it is not ideal - use click event for storing clicked link, and then bind active class...

[gnomeontherun]

A better solution is https://angular.io/api/router/RouterLinkActive#how-to-use so when that link is active the class is automatically applied to that element.

[b-mi]

gnomeontherun - thank you, routerLinkActive helped me

[github-actions[bot]]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.