Angular: Is there a way to bind boolean value to presence of CSS class?

Question

I can use ngClass to apply a CSS class based on the value of a boolean. However, can I do the opposite? Is it possible to change the value of a boolean based on the existence of a CSS class? Looking around, I cannot find a way to do this in Angular templates.

For context, I'm using routerLinkActive to apply a class if the link is active. What I actually need to do is set a boolean value if the link is active.

By 'link is active' do you mean if a component is displayed? What would the final purpose be? — SebastianG
– SebastianG, Commented Aug 31, 2018 at 22:02
You can check the current route using the Router class, and just check the value in your .ts file — user184994
– user184994, Commented Aug 31, 2018 at 22:20
@SiddharthAjmera I have a sidenav with categories, and links belonging to those categories. I expand or collapse the category based on a boolean value. Essentially, I am trying to have the category automatically expanded on page load if the current link is within that category. — Justin Sleep
– Justin Sleep, Commented Aug 31, 2018 at 23:36
@SebastianG I mean the router link is active, my above comment gets more into what my rationale is. — Justin Sleep
– Justin Sleep, Commented Aug 31, 2018 at 23:38

user184994 · Accepted Answer · 2018-09-01 01:37:03Z

6

The routerLinkActive directive actually has an isActive property you can use.

For example, if we have the following links:

<a routerLink="/one" routerLinkActive="active" #one="routerLinkActive">One</a>

<a routerLink="/two" routerLinkActive="active" #two="routerLinkActive">Two</a>

Here, i've added a reference on each link to their routerLinkActive directive, using the #name="routerLinkActive" syntax. As such, we can now reference the isActive property like so:

<span *ngIf="one.isActive">ONE IS ACTIVE</span>
<span *ngIf="two.isActive">TWO IS ACTIVE</span>

Here it's being used to pass a boolean to *ngIf, but you can use it anywhere you'd like access to that boolean property.

Here is a Stackblitz demo

edited Sep 1, 2018 at 1:37

answered Sep 1, 2018 at 1:15

user184994

18.3k2 gold badges51 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular: Is there a way to bind boolean value to presence of CSS class?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related