Skip to content

Expose signal version of ActivatedRoute and Router observable class properties #59877

Description

@joshdales

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.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions