Component not being updated after updating signal

Question

My component doesn't seem to be updated after successfully updating a signal.

I tried debugging it using console logs, but that only confirmed that the signal gets updated correctly. But for some reason my navbar component doesn't get rerendered with the correct color.

Here is a stackblitz with the problem.

https://stackblitz.com/edit/stackblitz-starters-saszen?file=src%2Fapp%2Fnavbar%2Fnavbar.component.ts

What I want is that the navbar items have different active colours. It should have a different underlined colour on the home page than on the about page when hovering it.

Answer 1

it seems it is routerLinkActive order of updates and execution logic problem https://github.com/angular/angular/blob/main/packages/router/src/directives/router_link_active.ts#L211

I would propose you to use one static class for active link and modify its appearance in css

        <a
          routerLink=""
          [routerLinkActiveOptions]="{ exact: true }"
          routerLinkActive="active-link"
      
          class="hover-{{ hoverColor }} active-link-{{ activeColor }}"
        >
          Home
        </a>

.active-link.active-link-lilac {
  text-decoration-color: var(--lilac);
}