Cookies concent notice

This site uses cookies from Google to deliver its services and to analyze traffic.
Learn more
Skip to main content
This site is no longer updated.Head to Angular.devHome
/

This is the archived documentation for Angular v17. Please visit angular.dev to see this page for the current version of Angular.

ActivatedRouteSnapshot

Contains the information about a route associated with a component loaded in an outlet at a particular moment in time. ActivatedRouteSnapshot can also be used to traverse the router state tree.

See more...

      
      class ActivatedRouteSnapshot {
  routeConfig: Route | null
  title: string | undefined
  url: UrlSegment[]
  params: Params
  queryParams: Params
  fragment: string | null
  data: Data
  outlet: string
  component: Type<any> | null
  root: ActivatedRouteSnapshot
  parent: ActivatedRouteSnapshot | null
  firstChild: ActivatedRouteSnapshot | null
  children: ActivatedRouteSnapshot[]
  pathFromRoot: ActivatedRouteSnapshot[]
  paramMap: ParamMap
  queryParamMap: ParamMap
toString(): string }

Description

The following example initializes a component with route information extracted from the snapshot of the root node at the time of creation.

      
      @Component({templateUrl:'./my-component.html'})
class MyComponent {
  constructor(route: ActivatedRoute) {
    const id: string = route.snapshot.params.id;
    const url: string = route.snapshot.url.join('');
    const user = route.snapshot.data.user;
  }
}
    

Properties

Property Description
routeConfig: Route | null Read-Only

The configuration used to match this route *

title: string | undefined Read-Only

The resolved route title

url: UrlSegment[]

The URL segments matched by this route

params: Params

The matrix parameters scoped to this route.

You can compute all params (or data) in the router state or to get params outside of an activated component by traversing the RouterState tree as in the following example:

      
      collectRouteParams(router: Router) {
  let params = {};
  let stack: ActivatedRouteSnapshot[] = [router.routerState.snapshot.root];
  while (stack.length > 0) {
    const route = stack.pop()!;
    params = {...params, ...route.params};
    stack.push(...route.children);
  }
  return params;
}
    
queryParams: Params

The query parameters shared by all the routes

fragment: string | null

The URL fragment shared by all the routes

data: Data

The static and resolved data of this route

outlet: string

The outlet name of the route

component: Type<any> | null

The component of the route

root: ActivatedRouteSnapshot Read-Only

The root of the router state

parent: ActivatedRouteSnapshot | null Read-Only

The parent of this route in the router state tree

firstChild: ActivatedRouteSnapshot | null Read-Only

The first child of this route in the router state tree

children: ActivatedRouteSnapshot[] Read-Only

The children of this route in the router state tree

pathFromRoot: ActivatedRouteSnapshot[] Read-Only

The path from the root of the router state tree to this route

paramMap: ParamMap Read-Only
queryParamMap: ParamMap Read-Only

Methods

      
      toString(): string
    
Parameters

There are no parameters.

Returns

string