This is the archived documentation for Angular v5. Please visit angular.io to see documentation for the current version of Angular.

ActivatedRoute

npm Package @angular/router
Module import { ActivatedRoute } from '@angular/router';
Source router/src/router_state.ts

Contains the information about a route associated with a component loaded in an outlet. An ActivatedRoute can also be used to traverse the router state tree.

Interface Overview

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

How To Use

      
      @Component({...})
class MyComponent {
  constructor(route: ActivatedRoute) {
    const id: Observable<string> = route.params.map(p => p.id);
    const url: Observable<string> = route.url.map(segments => segments.join(''));
    // route.data includes both `data` and `resolve`
    const user = route.data.map(d => d.user);
  }
}
    

Members

      
      snapshot: ActivatedRouteSnapshot
    

The current snapshot of this route


      
      url: Observable<UrlSegment[]>
    

An observable of the URL segments matched by this route


      
      params: Observable<Params>
    

An observable of the matrix parameters scoped to this route


      
      queryParams: Observable<Params>
    

An observable of the query parameters shared by all the routes


      
      fragment: Observable<string>
    

An observable of the URL fragment shared by all the routes


      
      data: Observable<Data>
    

An observable of the static and resolved data of this route.


      
      outlet: string
    

The outlet name of the route. It's a constant


      
      component: Type<any> | string | null
    

The component of the route. It's a constant


      
      get routeConfig: Route | null
    

The configuration used to match this route


      
      get root: ActivatedRoute
    

The root of the router state


      
      get parent: ActivatedRoute | null
    

The parent of this route in the router state tree


      
      get firstChild: ActivatedRoute | null
    

The first child of this route in the router state tree


      
      get children: ActivatedRoute[]
    

The children of this route in the router state tree


      
      get pathFromRoot: ActivatedRoute[]
    

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


      
      get paramMap: Observable<ParamMap>
    

      
      get queryParamMap: Observable<ParamMap>
    

      
      toString(): string