Angular Activated Route

Angular route is an array of route configurations. Each Angular route have many properties.

Angular ActivatedRoute
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

IT Professionals, Web Developers, web programmers, IT students can Apply for the certification course and get ahead.

• Practice Test for Angular4
• Govt Certification in Angular 4
• Blog posts on Angular 4 and Web Development

Back to Angular 4 Tutorial Main Page