RouterLinkActive initial render state prior to first router navigation
- Dominant language
- TypeScript
- Stars
- 101k
- Forks
- 27.5k
- Avg merge
- 1d 19h
- Merged PRs (30d)
- 288
Description
### Which @angular/* package(s) are relevant/related to the feature request?
router
### Description
Hi team !
I wanted to open this issue to discuss your view regarding the current state of the directive `RouterLinkActive` and your plans regarding it.
Today, this directive has a very neat api and we strongly recommend its usage in our company.
However, the way it handles the display of the active class creates a visually annoying flicker...
You can see the flicker when you open for example https://material.angular.dev/components/categories and notice how the background around the Components button only appears after a short delay.
(Note: angular.dev does not have this behavior but the active class was managed with completely home-made code ? also, angular.dev is missing `aria-current` attributes for the active anchors)
For more context, there are two problems.
First one is the fact the class is added / removed through a queued microtrask.
Second is that at startup / hydration, a call to `router.isActive` will not be correct until the router has performed its first navigation internally...
### Proposed solution
It depends greatly on what's the plan regarding Angular Routing in general...
As the team is working on turning many facets of old Angular into signals (Forms is another example), I guess Routing is in the works.
I have opened the draft PR #62974 that removed the flicker for my internal project, but it probably has a bunch of issues...
### Alternatives considered
I guess copy-pasting the internal code done for angular.dev would work, but I would prefer to use something provided by `@angular/router`...
Contributor guide
Research direction
Start with the RouterLinkActive directive in @angular/router and inspect how router.isActive behaves before the router's first navigation, including during startup or hydration. Review draft PR #62974 for the existing proposed direction; done should mean the active class does not visibly flicker on initial render while active-link behavior remains correct.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100