{"id":59891,"date":"2018-05-03T15:59:40","date_gmt":"2018-05-03T10:29:40","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?p=59891"},"modified":"2024-04-12T14:20:50","modified_gmt":"2024-04-12T08:50:50","slug":"angular-activated-route","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/angular-activated-route\/","title":{"rendered":"Angular Activated Route"},"content":{"rendered":"

Angular Activated Route<\/h1>\n

Angular route is an array of route configurations. Each Angular route have many properties.<\/p>\n

Angular ActivatedRoute<\/strong>
\nContains 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.<\/p>\n

Interface Overview
\ninterface ActivatedRoute {
\nsnapshot: ActivatedRouteSnapshot
\nurl: Observable<UrlSegment[]>
\nparams: Observable<Params>
\nqueryParams: Observable<Params>
\nfragment: Observable<string>
\ndata: Observable<Data>
\noutlet: string
\ncomponent: Type<any> | string | null
\nget routeConfig: Route | null
\nget root: ActivatedRoute
\nget parent: ActivatedRoute | null
\nget firstChild: ActivatedRoute | null
\nget children: ActivatedRoute[]\nget pathFromRoot: ActivatedRoute[]\nget paramMap: Observable<ParamMap>
\nget queryParamMap: Observable<ParamMap>
\ntoString(): string
\n}<\/p>\n

How To Use
\n@Component({…})
\nclass MyComponent {
\nconstructor(route: ActivatedRoute) {
\nconst id: Observable<string> = route.params.map(p => p.id);
\nconst url: Observable<string> = route.url.map(segments => segments.join(”));
\n\/\/ route.data includes both `data` and `resolve`
\nconst user = route.data.map(d => d.user);
\n}
\n}<\/p>\n

Members<\/p>\n

snapshot: ActivatedRouteSnapshot
\nThe current snapshot of this route<\/p>\n

url: Observable<UrlSegment[]>
\nAn observable of the URL segments matched by this route<\/p>\n

params: Observable<Params>
\nAn observable of the matrix parameters scoped to this route<\/p>\n

queryParams: Observable<Params>
\nAn observable of the query parameters shared by all the routes<\/p>\n

fragment: Observable<string>
\nAn observable of the URL fragment shared by all the routes<\/p>\n

data: Observable<Data>
\nAn observable of the static and resolved data of this route.<\/p>\n

outlet: string
\nThe outlet name of the route. It’s a constant<\/p>\n

component: Type<any> | string | null
\nThe component of the route. It’s a constant<\/p>\n

get routeConfig: Route | null
\nThe configuration used to match this route<\/p>\n

get root: ActivatedRoute
\nThe root of the router state<\/p>\n

get parent: ActivatedRoute | null
\nThe parent of this route in the router state tree<\/p>\n

get firstChild: ActivatedRoute | null
\nThe first child of this route in the router state tree<\/p>\n

get children: ActivatedRoute[]\nThe children of this route in the router state tree<\/p>\n

get pathFromRoot: ActivatedRoute[]\nThe path from the root of the router state tree to this route<\/p>\n

get paramMap: Observable<ParamMap>
\nget queryParamMap: Observable<ParamMap><\/p>\n

toString(): string<\/p>\n

IT Professionals, Web Developers, web programmers, IT students can Apply for the certification course and get ahead.<\/strong><\/p>\n

\"\"<\/a><\/p>\n