Which @angular/* package(s) are relevant/related to the feature request?
router
Description
It would be nice if there were signal equivalents to things like data/paramMap/queryParams/routerEvents etc. on the ActivatedRoute and Router.
Currently I have to do a lot of this kinda thing:
activatedRoute = inject(ActivatedRoute)
params = toSignal(this.activatedRoute.paramMap)
queryParams = toSignal(this.activatedRouter.queryParamMap)
userId = computed(() => this.params()?.get('userId'))
viewingTab = computed(() => this.queryParams()?.get('tab'))
Or even sometimes something like this (say if I want to read the params of a child route):
activatedRoute = inject(ActivatedRoute)
router = inject(Router)
routerEvents = toSignal(this.router.events)
userId = linkedSignal({
source: () => this.routerEvents(),
computation: () => this.activatedRoute.snapshot.firstChild.paramMap.get('userId')
})
Which can get quite annoying and boilerplatey, and I end up with a lot more things being defined that I really want.
Proposed solution
Be able to access a signal based values of these. I don't have a strong opinion on the naming of such things I'm just prefixing things with signal to illustrate the idea.
activatedRoute = inject(ActivatedRoute)
userId = computed(() => this.activatedRoute.signalParamMap()?.get('userId'))
viewingTab = computed(() => this.activatedRoute.signalQueryParamMap()?.get('tab'))
activatedRoute = inject(ActivatedRoute);
router = inject(Router)
userId = linkedSignal({
source: () => this.router.signalEvents(),
computation: () => this.activatedRoute.snapshot.firstChild.paramMap.get('userId')
})
This assumes that the signal and observable properties would live next to each other in the existing class.
Alternatives considered
Have different injectables eg. SignalActivatedRoute/SignalRouter or maybe even better would be something like import {ActivatedRoute, Router} from '@angular/router/signals' so that then you just need to change your return type.
Just to note that I'm only suggesting these things because they are the ones that I use the most often might be more router related things that could benefit from this that I'm not aware of.
Which @angular/* package(s) are relevant/related to the feature request?
router
Description
It would be nice if there were signal equivalents to things like
data/paramMap/queryParams/routerEventsetc. on theActivatedRouteandRouter.Currently I have to do a lot of this kinda thing:
Or even sometimes something like this (say if I want to read the params of a child route):
Which can get quite annoying and boilerplatey, and I end up with a lot more things being defined that I really want.
Proposed solution
Be able to access a signal based values of these. I don't have a strong opinion on the naming of such things I'm just prefixing things with
signalto illustrate the idea.This assumes that the signal and observable properties would live next to each other in the existing class.
Alternatives considered
Have different injectables eg.
SignalActivatedRoute/SignalRouteror maybe even better would be something likeimport {ActivatedRoute, Router} from '@angular/router/signals'so that then you just need to change your return type.Just to note that I'm only suggesting these things because they are the ones that I use the most often might be more router related things that could benefit from this that I'm not aware of.