Angular 2: Class binding doesn't update when data is changed in separate component

Question

I try to add an underline on the active-item in my NavBar component by binding the return value of the isActive() function. isActive() compares the url path with the string value passed in and returns true or false.

When I click on either item in the NavBar component, the isActive() function runs and the underline displays as expected on the NavBar element that corresponds to the page I navigated to.

However when I click an anchor tag outside of the NavBar component, the isActive() function doesn't get run again, so the underline remains on the navbar element for the previous page:

NavBar HTML:

<div class="anchor-wrapper" [class.active-item]="isActive('/dashboard')"> 
    <a [routerLink]="['/dashboard']">Dashboard</a>
</div>
<div class="anchor-wrapper" [class.active-item]="isActive('/inventory')">
    <a [routerLink]="['/inventory']">Inventory</a>
</div>

NavBar TS:

isActive(path) {
    return (url.parse(window.location.href).pathname === path) ? true : false;
}

Dashboard HTML:

<a (click)="onVehicleStatusClick()" RouterLinkActive="active"> {{promotedCount}} </a>

Dashboard TS:

onVehicleStatusClick(){
    this.router.navigate(['/inventory']);
}

How do I ensure that isActive() runs again when I navigate to another route outside of the NavBar component?

Many thanks from an Angular newbie

what about using built in routerLinkActive ? Have you tried it? — kboul
– kboul, Commented Jul 18, 2018 at 14:23
I saw routerLinkActive in the legacy code, but after checking the Angular documentation just now, I don't think it was being used properly. Lemme try and I'll let you know! — Robert
– Robert, Commented Jul 18, 2018 at 14:29
It worked! If you want to post it as an answer, i'll accept it. thanks a ton — Robert
– Robert, Commented Jul 18, 2018 at 14:30

kboul · Accepted Answer · 2019-02-12 18:20:35Z

1

You can use routerLinkActive directive as follows:

NavBar HTML:

<div class="anchor-wrapper" routerLinkActive="isActive('/dashboard')"> 
    <a [routerLink]="['/dashboard']">Dashboard</a>
</div>
<div class="anchor-wrapper" routerLinkActive="isActive('/inventory')">
    <a [routerLink]="['/inventory']">Inventory</a>
</div

Docs

edited Feb 12, 2019 at 18:20

answered Jul 18, 2018 at 14:37

kboul

14.7k5 gold badges50 silver badges60 bronze badges

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

Collectives™ on Stack Overflow

Angular 2: Class binding doesn't update when data is changed in separate component

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