@angular/router

  • Version 14.0.4
  • Published
  • 2.79 MB
  • 1 dependency
  • MIT license

Install

npm i @angular/router
yarn add @angular/router
pnpm add @angular/router

Overview

Angular - the routing library

Index

Variables

Functions

Classes

Interfaces

Enums

Type Aliases

Namespaces

Variables

variable ɵROUTER_PROVIDERS

const ɵROUTER_PROVIDERS: Provider[];

    variable PRIMARY_OUTLET

    const PRIMARY_OUTLET: string;
    • The primary routing outlet.

    variable ROUTER_CONFIGURATION

    const ROUTER_CONFIGURATION: InjectionToken<ExtraOptions>;
    • A [DI token](guide/glossary/#di-token) for the router service.

    variable ROUTER_INITIALIZER

    const ROUTER_INITIALIZER: InjectionToken<(compRef: ComponentRef<any>) => void>;
    • A [DI token](guide/glossary/#di-token) for the router initializer that is called after the app is bootstrapped.

    variable ROUTES

    const ROUTES: InjectionToken<Route[][]>;
    • The [DI token](guide/glossary/#di-token) for a router configuration.

      ROUTES is a low level API for router configuration via dependency injection.

      We recommend that in almost all cases to use higher level APIs such as RouterModule.forRoot(), RouterModule.forChild(), provideRoutes, or Router.resetConfig().

    variable VERSION

    const VERSION: Version;

    Functions

    function convertToParamMap

    convertToParamMap: (params: Params) => ParamMap;
    • Converts a Params instance to a ParamMap.

      Parameter params

      The instance to convert.

      Returns

      The new map instance.

    function ɵassignExtraOptionsToRouter

    ɵassignExtraOptionsToRouter: (opts: ExtraOptions, router: Router) => void;

      function ɵflatten

      ɵflatten: <T>(arr: T[][]) => T[];
      • Flattens single-level nested arrays.

      function ɵprovidePreloading

      ɵprovidePreloading: (preloadingStrategy: Type<PreloadingStrategy>) => Provider[];

        function provideRoutes

        provideRoutes: (routes: Routes) => any;
        • Registers a [DI provider](guide/glossary#provider) for a set of routes.

          Parameter routes

          The route configuration to provide.

          @NgModule({
          imports: [RouterModule.forChild(ROUTES)],
          providers: [provideRoutes(EXTRA_ROUTES)]
          })
          class MyNgModule {}

        Classes

        class ActivatedRoute

        class ActivatedRoute {}
        • Provides access to information about a route associated with a component that is loaded in an outlet. Use to traverse the RouterState tree and extract information from nodes.

          The following example shows how to construct a component using information from a currently activated route.

          Note: the observables in this class only emit when the current and previous values differ based on shallow equality. For example, changing deeply nested properties in resolved data will not cause the ActivatedRoute.data Observable to emit a new value.

          See Also

          • [Getting route information](guide/router#getting-route-information)

        property children

        readonly children: ActivatedRoute[];
        • The children of this route in the router state tree.

        property component

        component: any;
        • The component of the route, a constant.

        property data

        data: Observable<Data>;
        • An observable of the static and resolved data of this route.

        property firstChild

        readonly firstChild: ActivatedRoute;
        • The first child of this route in the router state tree.

        property fragment

        fragment: Observable<string>;
        • An observable of the URL fragment shared by all the routes.

        property outlet

        outlet: string;
        • The outlet name of the route, a constant.

        property paramMap

        readonly paramMap: Observable<ParamMap>;
        • An Observable that contains a map of the required and optional parameters specific to the route. The map supports retrieving single and multiple values from the same parameter.

        property params

        params: Observable<Params>;
        • An observable of the matrix parameters scoped to this route.

        property parent

        readonly parent: ActivatedRoute;
        • The parent of this route in the router state tree.

        property pathFromRoot

        readonly pathFromRoot: ActivatedRoute[];
        • The path from the root of the router state tree to this route.

        property queryParamMap

        readonly queryParamMap: Observable<ParamMap>;
        • An Observable that contains a map of the query parameters available to all routes. The map supports retrieving single and multiple values from the query parameter.

        property queryParams

        queryParams: Observable<Params>;
        • An observable of the query parameters shared by all the routes.

        property root

        readonly root: ActivatedRoute;
        • The root of the router state.

        property routeConfig

        readonly routeConfig: Route;
        • The configuration used to match this route.

        property snapshot

        snapshot: ActivatedRouteSnapshot;
        • The current snapshot of this route

        property url

        url: Observable<UrlSegment[]>;
        • An observable of the URL segments matched by this route.

        method toString

        toString: () => string;

          class ActivatedRouteSnapshot

          class 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.

            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;
            }
            }

          property children

          readonly children: ActivatedRouteSnapshot[];
          • The children of this route in the router state tree

          property component

          component: any;
          • The component of the route

          property data

          data: Data;
          • The static and resolved data of this route

          property firstChild

          readonly firstChild: ActivatedRouteSnapshot;
          • The first child of this route in the router state tree

          property fragment

          fragment: string;
          • The URL fragment shared by all the routes

          property outlet

          outlet: string;
          • The outlet name of the route

          property paramMap

          readonly paramMap: ParamMap;

            property params

            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; } ```

            property parent

            readonly parent: ActivatedRouteSnapshot;
            • The parent of this route in the router state tree

            property pathFromRoot

            readonly pathFromRoot: ActivatedRouteSnapshot[];
            • The path from the root of the router state tree to this route

            property queryParamMap

            readonly queryParamMap: ParamMap;

              property queryParams

              queryParams: Params;
              • The query parameters shared by all the routes

              property root

              readonly root: ActivatedRouteSnapshot;
              • The root of the router state

              property routeConfig

              readonly routeConfig: Route;
              • The configuration used to match this route *

              property url

              url: UrlSegment[];
              • The URL segments matched by this route

              method toString

              toString: () => string;

                class ActivationEnd

                class ActivationEnd {}
                • An event triggered at the end of the activation part of the Resolve phase of routing.

                  See Also

                  • ActivationStart

                  • ResolveStart

                constructor

                constructor(snapshot: ActivatedRouteSnapshot);

                  property snapshot

                  snapshot: ActivatedRouteSnapshot;

                  property type

                  readonly type: number;

                    method toString

                    toString: () => string;

                      class ActivationStart

                      class ActivationStart {}
                      • An event triggered at the start of the activation part of the Resolve phase of routing.

                        See Also

                        • ActivationEnd

                        • ResolveStart

                      constructor

                      constructor(snapshot: ActivatedRouteSnapshot);

                        property snapshot

                        snapshot: ActivatedRouteSnapshot;

                        property type

                        readonly type: number;

                          method toString

                          toString: () => string;

                            class BaseRouteReuseStrategy

                            abstract class BaseRouteReuseStrategy implements RouteReuseStrategy {}
                            • This base route reuse strategy only reuses routes when the matched router configs are identical. This prevents components from being destroyed and recreated when just the fragment or query parameters change (that is, the existing component is _reused_).

                              This strategy does not store any routes for later reuse.

                              Angular uses this strategy by default.

                              It can be used as a base class for custom route reuse strategies, i.e. you can create your own class that extends the BaseRouteReuseStrategy one.

                            method retrieve

                            retrieve: (route: ActivatedRouteSnapshot) => DetachedRouteHandle | null;
                            • Returns null because this strategy does not store routes for later re-use.

                            method shouldAttach

                            shouldAttach: (route: ActivatedRouteSnapshot) => boolean;
                            • Returns false, meaning the route (and its subtree) is never reattached

                            method shouldDetach

                            shouldDetach: (route: ActivatedRouteSnapshot) => boolean;
                            • Whether the given route should detach for later reuse. Always returns false for BaseRouteReuseStrategy.

                            method shouldReuseRoute

                            shouldReuseRoute: (
                            future: ActivatedRouteSnapshot,
                            curr: ActivatedRouteSnapshot
                            ) => boolean;
                            • Determines if a route should be reused. This strategy returns true when the future route config and current route config are identical.

                            method store

                            store: (
                            route: ActivatedRouteSnapshot,
                            detachedTree: DetachedRouteHandle
                            ) => void;
                            • A no-op; the route is never stored since this strategy never detaches routes for later re-use.

                            class ChildActivationEnd

                            class ChildActivationEnd {}
                            • An event triggered at the end of the child-activation part of the Resolve phase of routing.

                              See Also

                              • ChildActivationStart

                              • ResolveStart

                            constructor

                            constructor(snapshot: ActivatedRouteSnapshot);

                              property snapshot

                              snapshot: ActivatedRouteSnapshot;

                              property type

                              readonly type: number;

                                method toString

                                toString: () => string;

                                  class ChildActivationStart

                                  class ChildActivationStart {}
                                  • An event triggered at the start of the child-activation part of the Resolve phase of routing.

                                    See Also

                                    • ChildActivationEnd

                                    • ResolveStart

                                  constructor

                                  constructor(snapshot: ActivatedRouteSnapshot);

                                    property snapshot

                                    snapshot: ActivatedRouteSnapshot;

                                    property type

                                    readonly type: number;

                                      method toString

                                      toString: () => string;

                                        class ChildrenOutletContexts

                                        class ChildrenOutletContexts {}
                                        • Store contextual information about the children (= nested) RouterOutlet

                                        method getContext

                                        getContext: (childName: string) => OutletContext | null;

                                          method getOrCreateContext

                                          getOrCreateContext: (childName: string) => OutletContext;

                                            method onChildOutletCreated

                                            onChildOutletCreated: (childName: string, outlet: RouterOutletContract) => void;
                                            • Called when a RouterOutlet directive is instantiated

                                            method onChildOutletDestroyed

                                            onChildOutletDestroyed: (childName: string) => void;
                                            • Called when a RouterOutlet directive is destroyed. We need to keep the context as the outlet could be destroyed inside a NgIf and might be re-created later.

                                            method onOutletDeactivated

                                            onOutletDeactivated: () => Map<string, OutletContext>;
                                            • Called when the corresponding route is deactivated during navigation. Because the component get destroyed, all children outlet are destroyed.

                                            method onOutletReAttached

                                            onOutletReAttached: (contexts: Map<string, OutletContext>) => void;

                                              class DefaultTitleStrategy

                                              class DefaultTitleStrategy extends TitleStrategy {}
                                              • The default TitleStrategy used by the router that updates the title using the Title service.

                                              constructor

                                              constructor(title: Title);

                                                property ɵfac

                                                static ɵfac: i0.ɵɵFactoryDeclaration<DefaultTitleStrategy, never>;

                                                  property ɵprov

                                                  static ɵprov: i0.ɵɵInjectableDeclaration<DefaultTitleStrategy>;

                                                    property title

                                                    readonly title: Title;

                                                      method updateTitle

                                                      updateTitle: (snapshot: RouterStateSnapshot) => void;
                                                      • Sets the title of the browser to the given value.

                                                        Parameter title

                                                        The pageTitle from the deepest primary route.

                                                      class DefaultUrlSerializer

                                                      class DefaultUrlSerializer implements UrlSerializer {}
                                                      • A default implementation of the UrlSerializer.

                                                        Example URLs:

                                                        /inbox/33(popup:compose)
                                                        /inbox/33;open=true/messages/44

                                                        DefaultUrlSerializer uses parentheses to serialize secondary segments (e.g., popup:compose), the colon syntax to specify the outlet, and the ';parameter=value' syntax (e.g., open=true) to specify route specific parameters.

                                                      method parse

                                                      parse: (url: string) => UrlTree;
                                                      • Parses a url into a UrlTree

                                                      method serialize

                                                      serialize: (tree: UrlTree) => string;
                                                      • Converts a UrlTree into a url

                                                      class GuardsCheckEnd

                                                      class GuardsCheckEnd extends RouterEvent {}
                                                      • An event triggered at the end of the Guard phase of routing.

                                                        See Also

                                                        • GuardsCheckStart

                                                      constructor

                                                      constructor(
                                                      id: number,
                                                      url: string,
                                                      urlAfterRedirects: string,
                                                      state: RouterStateSnapshot,
                                                      shouldActivate: boolean
                                                      );

                                                        property shouldActivate

                                                        shouldActivate: boolean;

                                                        property state

                                                        state: RouterStateSnapshot;

                                                        property type

                                                        readonly type: number;

                                                          property urlAfterRedirects

                                                          urlAfterRedirects: string;

                                                          method toString

                                                          toString: () => string;

                                                            class GuardsCheckStart

                                                            class GuardsCheckStart extends RouterEvent {}
                                                            • An event triggered at the start of the Guard phase of routing.

                                                              See Also

                                                              • GuardsCheckEnd

                                                            constructor

                                                            constructor(
                                                            id: number,
                                                            url: string,
                                                            urlAfterRedirects: string,
                                                            state: RouterStateSnapshot
                                                            );

                                                              property state

                                                              state: RouterStateSnapshot;

                                                              property type

                                                              readonly type: number;

                                                                property urlAfterRedirects

                                                                urlAfterRedirects: string;

                                                                method toString

                                                                toString: () => string;
                                                                  class NavigationCancel extends RouterEvent {}
                                                                  • An event triggered when a navigation is canceled, directly or indirectly. This can happen for several reasons including when a route guard returns false or initiates a redirect by returning a UrlTree.

                                                                    See Also

                                                                    • NavigationStart

                                                                    • NavigationEnd

                                                                    • NavigationError

                                                                  constructor(id: number, url: string, reason: string);
                                                                    reason: string;
                                                                    readonly type: number;
                                                                      toString: () => string;
                                                                      class NavigationEnd extends RouterEvent {}
                                                                      • An event triggered when a navigation ends successfully.

                                                                        See Also

                                                                        • NavigationStart

                                                                        • NavigationCancel

                                                                        • NavigationError

                                                                      constructor(id: number, url: string, urlAfterRedirects: string);
                                                                        readonly type: number;
                                                                          urlAfterRedirects: string;
                                                                          toString: () => string;
                                                                          class NavigationError extends RouterEvent {}
                                                                          • An event triggered when a navigation fails due to an unexpected error.

                                                                            See Also

                                                                            • NavigationStart

                                                                            • NavigationEnd

                                                                            • NavigationCancel

                                                                          constructor(id: number, url: string, error: any);
                                                                            error: any;
                                                                            readonly type: number;
                                                                              toString: () => string;
                                                                              class NavigationStart extends RouterEvent {}
                                                                              • An event triggered when a navigation starts.

                                                                              constructor(
                                                                              id: number,
                                                                              url: string,
                                                                              navigationTrigger?: NavigationTrigger,
                                                                              restoredState?: { [k: string]: any; navigationId: number }
                                                                              );
                                                                                navigationTrigger?: NavigationTrigger;
                                                                                • Identifies the call or event that triggered the navigation. An imperative trigger is a call to router.navigateByUrl() or router.navigate().

                                                                                  See Also

                                                                                  • NavigationEnd

                                                                                  • NavigationCancel

                                                                                  • NavigationError

                                                                                restoredState?: { [k: string]: any; navigationId: number };
                                                                                • The navigation state that was previously supplied to the pushState call, when the navigation is triggered by a popstate event. Otherwise null.

                                                                                  The state object is defined by NavigationExtras, and contains any developer-defined state value, as well as a unique ID that the router assigns to every router transition/navigation.

                                                                                  From the perspective of the router, the router never "goes back". When the user clicks on the back button in the browser, a new navigation ID is created.

                                                                                  Use the ID in this previous-state object to differentiate between a newly created state and one returned to by a popstate event, so that you can restore some remembered state, such as scroll position.

                                                                                readonly type: number;
                                                                                  toString: () => string;

                                                                                  class NoPreloading

                                                                                  class NoPreloading implements PreloadingStrategy {}
                                                                                  • Provides a preloading strategy that does not preload any modules.

                                                                                    This strategy is enabled by default.

                                                                                  property ɵfac

                                                                                  static ɵfac: i0.ɵɵFactoryDeclaration<NoPreloading, never>;

                                                                                    property ɵprov

                                                                                    static ɵprov: i0.ɵɵInjectableDeclaration<NoPreloading>;

                                                                                      method preload

                                                                                      preload: (route: Route, fn: () => Observable<any>) => Observable<any>;

                                                                                        class OutletContext

                                                                                        class OutletContext {}
                                                                                        • Store contextual information about a RouterOutlet

                                                                                        property attachRef

                                                                                        attachRef: any;

                                                                                          property children

                                                                                          children: ChildrenOutletContexts;

                                                                                            property injector

                                                                                            injector: any;

                                                                                              property outlet

                                                                                              outlet: RouterOutletContract;

                                                                                                property resolver

                                                                                                resolver: any;
                                                                                                • Deprecated

                                                                                                  Passing a resolver to retrieve a component factory is not required and is deprecated since v14.

                                                                                                property route

                                                                                                route: ActivatedRoute;

                                                                                                  class ɵEmptyOutletComponent

                                                                                                  class ɵEmptyOutletComponent {}
                                                                                                  • This component is used internally within the router to be a placeholder when an empty router-outlet is needed. For example, with a config such as:

                                                                                                    {path: 'parent', outlet: 'nav', children: [...]}

                                                                                                    In order to render, there needs to be a component on this config, which will default to this EmptyOutletComponent.

                                                                                                  property ɵcmp

                                                                                                  static ɵcmp: i0.ɵɵComponentDeclaration<
                                                                                                  ɵEmptyOutletComponent,
                                                                                                  'ng-component',
                                                                                                  never,
                                                                                                  {},
                                                                                                  {},
                                                                                                  never,
                                                                                                  never,
                                                                                                  false
                                                                                                  >;

                                                                                                    property ɵfac

                                                                                                    static ɵfac: i0.ɵɵFactoryDeclaration<ɵEmptyOutletComponent, never>;

                                                                                                      class PreloadAllModules

                                                                                                      class PreloadAllModules implements PreloadingStrategy {}
                                                                                                      • Provides a preloading strategy that preloads all modules as quickly as possible.

                                                                                                        RouterModule.forRoot(ROUTES, {preloadingStrategy: PreloadAllModules})

                                                                                                      property ɵfac

                                                                                                      static ɵfac: i0.ɵɵFactoryDeclaration<PreloadAllModules, never>;

                                                                                                        property ɵprov

                                                                                                        static ɵprov: i0.ɵɵInjectableDeclaration<PreloadAllModules>;

                                                                                                          method preload

                                                                                                          preload: (route: Route, fn: () => Observable<any>) => Observable<any>;

                                                                                                            class PreloadingStrategy

                                                                                                            abstract class PreloadingStrategy {}
                                                                                                            • Provides a preloading strategy.

                                                                                                            method preload

                                                                                                            abstract preload: (route: Route, fn: () => Observable<any>) => Observable<any>;

                                                                                                              class ResolveEnd

                                                                                                              class ResolveEnd extends RouterEvent {}
                                                                                                              • An event triggered at the end of the Resolve phase of routing.

                                                                                                                See Also

                                                                                                                • ResolveStart.

                                                                                                              constructor

                                                                                                              constructor(
                                                                                                              id: number,
                                                                                                              url: string,
                                                                                                              urlAfterRedirects: string,
                                                                                                              state: RouterStateSnapshot
                                                                                                              );

                                                                                                                property state

                                                                                                                state: RouterStateSnapshot;

                                                                                                                property type

                                                                                                                readonly type: number;

                                                                                                                  property urlAfterRedirects

                                                                                                                  urlAfterRedirects: string;

                                                                                                                  method toString

                                                                                                                  toString: () => string;

                                                                                                                    class ResolveStart

                                                                                                                    class ResolveStart extends RouterEvent {}
                                                                                                                    • An event triggered at the start of the Resolve phase of routing.

                                                                                                                      Runs in the "resolve" phase whether or not there is anything to resolve. In future, may change to only run when there are things to be resolved.

                                                                                                                      See Also

                                                                                                                      • ResolveEnd

                                                                                                                    constructor

                                                                                                                    constructor(
                                                                                                                    id: number,
                                                                                                                    url: string,
                                                                                                                    urlAfterRedirects: string,
                                                                                                                    state: RouterStateSnapshot
                                                                                                                    );

                                                                                                                      property state

                                                                                                                      state: RouterStateSnapshot;

                                                                                                                      property type

                                                                                                                      readonly type: number;

                                                                                                                        property urlAfterRedirects

                                                                                                                        urlAfterRedirects: string;

                                                                                                                        method toString

                                                                                                                        toString: () => string;

                                                                                                                          class RouteConfigLoadEnd

                                                                                                                          class RouteConfigLoadEnd {}
                                                                                                                          • An event triggered when a route has been lazy loaded.

                                                                                                                            See Also

                                                                                                                            • RouteConfigLoadStart

                                                                                                                          constructor

                                                                                                                          constructor(route: Route);

                                                                                                                            property route

                                                                                                                            route: Route;

                                                                                                                            property type

                                                                                                                            readonly type: number;

                                                                                                                              method toString

                                                                                                                              toString: () => string;

                                                                                                                                class RouteConfigLoadStart

                                                                                                                                class RouteConfigLoadStart {}
                                                                                                                                • An event triggered before lazy loading a route configuration.

                                                                                                                                  See Also

                                                                                                                                  • RouteConfigLoadEnd

                                                                                                                                constructor

                                                                                                                                constructor(route: Route);

                                                                                                                                  property route

                                                                                                                                  route: Route;

                                                                                                                                  property type

                                                                                                                                  readonly type: number;

                                                                                                                                    method toString

                                                                                                                                    toString: () => string;

                                                                                                                                      class Router

                                                                                                                                      class Router {}
                                                                                                                                      • A service that provides navigation among views and URL manipulation capabilities.

                                                                                                                                        See Also

                                                                                                                                        • Route.

                                                                                                                                        • [Routing and Navigation Guide](guide/router).

                                                                                                                                          RouterModule

                                                                                                                                      constructor

                                                                                                                                      constructor(
                                                                                                                                      rootComponentType: any,
                                                                                                                                      urlSerializer: UrlSerializer,
                                                                                                                                      rootContexts: ChildrenOutletContexts,
                                                                                                                                      location: Location_2,
                                                                                                                                      injector: Injector,
                                                                                                                                      compiler: Compiler,
                                                                                                                                      config: Routes
                                                                                                                                      );
                                                                                                                                      • Creates the router service.

                                                                                                                                      property canceledNavigationResolution

                                                                                                                                      canceledNavigationResolution: 'replace' | 'computed';
                                                                                                                                      • Configures how the Router attempts to restore state when a navigation is cancelled.

                                                                                                                                        'replace' - Always uses location.replaceState to set the browser state to the state of the router before the navigation started. This means that if the URL of the browser is updated _before_ the navigation is canceled, the Router will simply replace the item in history rather than trying to restore to the previous location in the session history. This happens most frequently with urlUpdateStrategy: 'eager' and navigations with the browser back/forward buttons.

                                                                                                                                        'computed' - Will attempt to return to the same index in the session history that corresponds to the Angular route when the navigation gets cancelled. For example, if the browser back button is clicked and the navigation is cancelled, the Router will trigger a forward navigation and vice versa.

                                                                                                                                        Note: the 'computed' option is incompatible with any UrlHandlingStrategy which only handles a portion of the URL because the history restoration navigates to the previous place in the browser history rather than simply resetting a portion of the URL.

                                                                                                                                        The default value is replace.

                                                                                                                                      property config

                                                                                                                                      config: Routes;

                                                                                                                                        property errorHandler

                                                                                                                                        errorHandler: ErrorHandler;
                                                                                                                                        • A handler for navigation errors in this NgModule.

                                                                                                                                        property events

                                                                                                                                        readonly events: Observable<Event_2>;
                                                                                                                                        • An event stream for routing events in this NgModule.

                                                                                                                                        property malformedUriErrorHandler

                                                                                                                                        malformedUriErrorHandler: (
                                                                                                                                        error: URIError,
                                                                                                                                        urlSerializer: UrlSerializer,
                                                                                                                                        url: string
                                                                                                                                        ) => UrlTree;
                                                                                                                                        • A handler for errors thrown by Router.parseUrl(url) when url contains an invalid character. The most common case is a % sign that's not encoded and is not part of a percent encoded sequence.

                                                                                                                                        property navigated

                                                                                                                                        navigated: boolean;
                                                                                                                                        • True if at least one navigation event has occurred, false otherwise.

                                                                                                                                        property onSameUrlNavigation

                                                                                                                                        onSameUrlNavigation: 'reload' | 'ignore';
                                                                                                                                        • How to handle a navigation request to the current URL. One of:

                                                                                                                                          - 'ignore' : The router ignores the request. - 'reload' : The router reloads the URL. Use to implement a "refresh" feature.

                                                                                                                                          Note that this only configures whether the Route reprocesses the URL and triggers related action and events like redirects, guards, and resolvers. By default, the router re-uses a component instance when it re-navigates to the same component type without visiting a different component first. This behavior is configured by the RouteReuseStrategy. In order to reload routed components on same url navigation, you need to set onSameUrlNavigation to 'reload' _and_ provide a RouteReuseStrategy which returns false for shouldReuseRoute.

                                                                                                                                        property ɵfac

                                                                                                                                        static ɵfac: i0.ɵɵFactoryDeclaration<Router, never>;

                                                                                                                                          property ɵprov

                                                                                                                                          static ɵprov: i0.ɵɵInjectableDeclaration<Router>;

                                                                                                                                            property paramsInheritanceStrategy

                                                                                                                                            paramsInheritanceStrategy: 'emptyOnly' | 'always';
                                                                                                                                            • How to merge parameters, data, resolved data, and title from parent to child routes. One of:

                                                                                                                                              - 'emptyOnly' : Inherit parent parameters, data, and resolved data for path-less or component-less routes. - 'always' : Inherit parent parameters, data, and resolved data for all child routes.

                                                                                                                                            property relativeLinkResolution

                                                                                                                                            relativeLinkResolution: 'legacy' | 'corrected';
                                                                                                                                            • Enables a bug fix that corrects relative link resolution in components with empty paths.

                                                                                                                                              See Also

                                                                                                                                              • RouterModule

                                                                                                                                              Deprecated

                                                                                                                                            property routeReuseStrategy

                                                                                                                                            routeReuseStrategy: RouteReuseStrategy;
                                                                                                                                            • A strategy for re-using routes.

                                                                                                                                            property routerState

                                                                                                                                            readonly routerState: RouterState;
                                                                                                                                            • The current state of routing in this NgModule.

                                                                                                                                            property titleStrategy

                                                                                                                                            titleStrategy?: TitleStrategy;
                                                                                                                                            • A strategy for setting the title based on the routerState.

                                                                                                                                            property url

                                                                                                                                            readonly url: string;
                                                                                                                                            • The current URL.

                                                                                                                                            property urlHandlingStrategy

                                                                                                                                            urlHandlingStrategy: UrlHandlingStrategy;
                                                                                                                                            • A strategy for extracting and merging URLs. Used for AngularJS to Angular migrations.

                                                                                                                                            property urlUpdateStrategy

                                                                                                                                            urlUpdateStrategy: 'deferred' | 'eager';
                                                                                                                                            • Determines when the router updates the browser URL. By default ("deferred"), updates the browser URL after navigation has finished. Set to 'eager' to update the browser URL at the beginning of navigation. You can choose to update early so that, if navigation fails, you can show an error message with the URL that failed.

                                                                                                                                            method createUrlTree

                                                                                                                                            createUrlTree: (
                                                                                                                                            commands: any[],
                                                                                                                                            navigationExtras?: UrlCreationOptions
                                                                                                                                            ) => UrlTree;
                                                                                                                                            • Appends URL segments to the current URL tree to create a new URL tree.

                                                                                                                                              Parameter commands

                                                                                                                                              An array of URL fragments with which to construct the new URL tree. If the path is static, can be the literal URL string. For a dynamic path, pass an array of path segments, followed by the parameters for each segment. The fragments are applied to the current URL tree or the one provided in the relativeTo property of the options object, if supplied.

                                                                                                                                              Parameter navigationExtras

                                                                                                                                              Options that control the navigation strategy.

                                                                                                                                              Returns

                                                                                                                                              The new URL tree.

                                                                                                                                              // create /team/33/user/11
                                                                                                                                              router.createUrlTree(['/team', 33, 'user', 11]);
                                                                                                                                              // create /team/33;expand=true/user/11
                                                                                                                                              router.createUrlTree(['/team', 33, {expand: true}, 'user', 11]);
                                                                                                                                              // you can collapse static segments like this (this works only with the first passed-in value):
                                                                                                                                              router.createUrlTree(['/team/33/user', userId]);
                                                                                                                                              // If the first segment can contain slashes, and you do not want the router to split it,
                                                                                                                                              // you can do the following:
                                                                                                                                              router.createUrlTree([{segmentPath: '/one/two'}]);
                                                                                                                                              // create /team/33/(user/11//right:chat)
                                                                                                                                              router.createUrlTree(['/team', 33, {outlets: {primary: 'user/11', right: 'chat'}}]);
                                                                                                                                              // remove the right secondary node
                                                                                                                                              router.createUrlTree(['/team', 33, {outlets: {primary: 'user/11', right: null}}]);
                                                                                                                                              // assuming the current url is `/team/33/user/11` and the route points to `user/11`
                                                                                                                                              // navigate to /team/33/user/11/details
                                                                                                                                              router.createUrlTree(['details'], {relativeTo: route});
                                                                                                                                              // navigate to /team/33/user/22
                                                                                                                                              router.createUrlTree(['../22'], {relativeTo: route});
                                                                                                                                              // navigate to /team/44/user/22
                                                                                                                                              router.createUrlTree(['../../team/44/user/22'], {relativeTo: route});
                                                                                                                                              Note that a value of `null` or `undefined` for `relativeTo` indicates that the
                                                                                                                                              tree should be created relative to the root.

                                                                                                                                            method dispose

                                                                                                                                            dispose: () => void;
                                                                                                                                            • Disposes of the router.

                                                                                                                                            method getCurrentNavigation

                                                                                                                                            getCurrentNavigation: () => Navigation | null;
                                                                                                                                            • Returns the current Navigation object when the router is navigating, and null when idle.

                                                                                                                                            method initialNavigation

                                                                                                                                            initialNavigation: () => void;
                                                                                                                                            • Sets up the location change listener and performs the initial navigation.

                                                                                                                                            method isActive

                                                                                                                                            isActive: {
                                                                                                                                            (url: string | UrlTree, exact: boolean): boolean;
                                                                                                                                            (url: string | UrlTree, matchOptions: IsActiveMatchOptions): boolean;
                                                                                                                                            };
                                                                                                                                            • Returns whether the url is activated.

                                                                                                                                              Deprecated

                                                                                                                                              Use IsActiveMatchOptions instead.

                                                                                                                                              - The equivalent IsActiveMatchOptions for true is {paths: 'exact', queryParams: 'exact', fragment: 'ignored', matrixParams: 'ignored'}. - The equivalent for false is {paths: 'subset', queryParams: 'subset', fragment: 'ignored', matrixParams: 'ignored'}.

                                                                                                                                            • Returns whether the url is activated.

                                                                                                                                            method navigate

                                                                                                                                            navigate: (commands: any[], extras?: NavigationExtras) => Promise<boolean>;
                                                                                                                                            • Navigate based on the provided array of commands and a starting point. If no starting route is provided, the navigation is absolute.

                                                                                                                                              Parameter commands

                                                                                                                                              An array of URL fragments with which to construct the target URL. If the path is static, can be the literal URL string. For a dynamic path, pass an array of path segments, followed by the parameters for each segment. The fragments are applied to the current URL or the one provided in the relativeTo property of the options object, if supplied.

                                                                                                                                              Parameter extras

                                                                                                                                              An options object that determines how the URL should be constructed or interpreted.

                                                                                                                                              Returns

                                                                                                                                              A Promise that resolves to true when navigation succeeds, to false when navigation fails, or is rejected on error.

                                                                                                                                              The following calls request navigation to a dynamic route path relative to the current URL.

                                                                                                                                              router.navigate(['team', 33, 'user', 11], {relativeTo: route});
                                                                                                                                              // Navigate without updating the URL, overriding the default behavior
                                                                                                                                              router.navigate(['team', 33, 'user', 11], {relativeTo: route, skipLocationChange: true});

                                                                                                                                              See Also

                                                                                                                                              • [Routing and Navigation guide](guide/router)

                                                                                                                                            method navigateByUrl

                                                                                                                                            navigateByUrl: (
                                                                                                                                            url: string | UrlTree,
                                                                                                                                            extras?: NavigationBehaviorOptions
                                                                                                                                            ) => Promise<boolean>;
                                                                                                                                            • Navigates to a view using an absolute route path.

                                                                                                                                              Parameter url

                                                                                                                                              An absolute path for a defined route. The function does not apply any delta to the current URL.

                                                                                                                                              Parameter extras

                                                                                                                                              An object containing properties that modify the navigation strategy.

                                                                                                                                              Returns

                                                                                                                                              A Promise that resolves to 'true' when navigation succeeds, to 'false' when navigation fails, or is rejected on error.

                                                                                                                                              The following calls request navigation to an absolute path.

                                                                                                                                              router.navigateByUrl("/team/33/user/11");
                                                                                                                                              // Navigate without updating the URL
                                                                                                                                              router.navigateByUrl("/team/33/user/11", { skipLocationChange: true });

                                                                                                                                              See Also

                                                                                                                                              • [Routing and Navigation guide](guide/router)

                                                                                                                                            method ngOnDestroy

                                                                                                                                            ngOnDestroy: () => void;

                                                                                                                                            method parseUrl

                                                                                                                                            parseUrl: (url: string) => UrlTree;
                                                                                                                                            • Parses a string into a UrlTree

                                                                                                                                            method resetConfig

                                                                                                                                            resetConfig: (config: Routes) => void;
                                                                                                                                            • Resets the route configuration used for navigation and generating links.

                                                                                                                                              Parameter config

                                                                                                                                              The route array for the new configuration.

                                                                                                                                              router.resetConfig([
                                                                                                                                              { path: 'team/:id', component: TeamCmp, children: [
                                                                                                                                              { path: 'simple', component: SimpleCmp },
                                                                                                                                              { path: 'user/:name', component: UserCmp }
                                                                                                                                              ]}
                                                                                                                                              ]);

                                                                                                                                            method serializeUrl

                                                                                                                                            serializeUrl: (url: UrlTree) => string;
                                                                                                                                            • Serializes a UrlTree into a string

                                                                                                                                            method setUpLocationChangeListener

                                                                                                                                            setUpLocationChangeListener: () => void;
                                                                                                                                            • Sets up the location change listener. This listener detects navigations triggered from outside the Router (the browser back/forward buttons, for example) and schedules a corresponding Router navigation so that the correct events, guards, etc. are triggered.

                                                                                                                                            class RouteReuseStrategy

                                                                                                                                            abstract class RouteReuseStrategy {}
                                                                                                                                            • Provides a way to customize when activated routes get reused.

                                                                                                                                            method retrieve

                                                                                                                                            abstract retrieve: (route: ActivatedRouteSnapshot) => DetachedRouteHandle | null;
                                                                                                                                            • Retrieves the previously stored route

                                                                                                                                            method shouldAttach

                                                                                                                                            abstract shouldAttach: (route: ActivatedRouteSnapshot) => boolean;
                                                                                                                                            • Determines if this route (and its subtree) should be reattached

                                                                                                                                            method shouldDetach

                                                                                                                                            abstract shouldDetach: (route: ActivatedRouteSnapshot) => boolean;
                                                                                                                                            • Determines if this route (and its subtree) should be detached to be reused later

                                                                                                                                            method shouldReuseRoute

                                                                                                                                            abstract shouldReuseRoute: (
                                                                                                                                            future: ActivatedRouteSnapshot,
                                                                                                                                            curr: ActivatedRouteSnapshot
                                                                                                                                            ) => boolean;
                                                                                                                                            • Determines if a route should be reused

                                                                                                                                            method store

                                                                                                                                            abstract store: (
                                                                                                                                            route: ActivatedRouteSnapshot,
                                                                                                                                            handle: DetachedRouteHandle | null
                                                                                                                                            ) => void;
                                                                                                                                            • Stores the detached route.

                                                                                                                                              Storing a null value should erase the previously stored value.

                                                                                                                                            class RouterEvent

                                                                                                                                            class RouterEvent {}
                                                                                                                                            • Base for events the router goes through, as opposed to events tied to a specific route. Fired one time for any given navigation.

                                                                                                                                              The following code shows how a class subscribes to router events.

                                                                                                                                              import {Event, RouterEvent, Router} from '@angular/router';
                                                                                                                                              class MyService {
                                                                                                                                              constructor(public router: Router) {
                                                                                                                                              router.events.pipe(
                                                                                                                                              filter((e: Event): e is RouterEvent => e instanceof RouterEvent)
                                                                                                                                              ).subscribe((e: RouterEvent) => {
                                                                                                                                              // Do something
                                                                                                                                              });
                                                                                                                                              }
                                                                                                                                              }

                                                                                                                                              See Also

                                                                                                                                              • Event

                                                                                                                                              • [Router events summary](guide/router-reference#router-events)

                                                                                                                                            constructor

                                                                                                                                            constructor(id: number, url: string);

                                                                                                                                              property id

                                                                                                                                              id: number;
                                                                                                                                              • A unique ID that the router assigns to every router navigation.

                                                                                                                                              property url

                                                                                                                                              url: string;
                                                                                                                                              • The URL that is the destination for this navigation.

                                                                                                                                              class RouterLink implements OnChanges {}
                                                                                                                                              • When applied to an element in a template, makes that element a link that initiates navigation to a route. Navigation opens one or more routed components in one or more <router-outlet> locations on the page.

                                                                                                                                                Given a route configuration [{ path: 'user/:name', component: UserCmp }], the following creates a static link to the route: <a routerLink="/user/bob">link to user component</a>

                                                                                                                                                You can use dynamic values to generate the link. For a dynamic link, pass an array of path segments, followed by the params for each segment. For example, ['/team', teamId, 'user', userName, {details: true}] generates a link to /team/11/user/bob;details=true.

                                                                                                                                                Multiple static segments can be merged into one term and combined with dynamic segments. For example, ['/team/11/user', userName, {details: true}]

                                                                                                                                                The input that you provide to the link is treated as a delta to the current URL. For instance, suppose the current URL is /user/(box//aux:team). The link <a [routerLink]="['/user/jim']">Jim</a> creates the URL /user/(jim//aux:team). See for more information.

                                                                                                                                                You can use absolute or relative paths in a link, set query parameters, control how parameters are handled, and keep a history of navigation states.

                                                                                                                                                ### Relative link paths

                                                                                                                                                The first segment name can be prepended with /, ./, or ../. * If the first segment begins with /, the router looks up the route from the root of the app. * If the first segment begins with ./, or doesn't begin with a slash, the router looks in the children of the current activated route. * If the first segment begins with ../, the router goes up one level in the route tree.

                                                                                                                                                ### Setting and handling query params and fragments

                                                                                                                                                The following link adds a query parameter and a fragment to the generated URL:

                                                                                                                                                <a [routerLink]="['/user/bob']" [queryParams]="{debug: true}" fragment="education">
                                                                                                                                                link to user component
                                                                                                                                                </a>

                                                                                                                                                By default, the directive constructs the new URL using the given query parameters. The example generates the link: /user/bob?debug=true#education.

                                                                                                                                                You can instruct the directive to handle query parameters differently by specifying the queryParamsHandling option in the link. Allowed values are:

                                                                                                                                                - 'merge': Merge the given queryParams into the current query params. - 'preserve': Preserve the current query params.

                                                                                                                                                For example:

                                                                                                                                                <a [routerLink]="['/user/bob']" [queryParams]="{debug: true}" queryParamsHandling="merge">
                                                                                                                                                link to user component
                                                                                                                                                </a>

                                                                                                                                                See .

                                                                                                                                                ### Preserving navigation history

                                                                                                                                                You can provide a state value to be persisted to the browser's [History.state property](https://developer.mozilla.org/en-US/docs/Web/API/History#Properties). For example:

                                                                                                                                                <a [routerLink]="['/user/bob']" [state]="{tracingId: 123}">
                                                                                                                                                link to user component
                                                                                                                                                </a>

                                                                                                                                                Use to retrieve a saved navigation-state value. For example, to capture the tracingId during the NavigationStart event:

                                                                                                                                                // Get NavigationStart events
                                                                                                                                                router.events.pipe(filter(e => e instanceof NavigationStart)).subscribe(e => {
                                                                                                                                                const navigation = router.getCurrentNavigation();
                                                                                                                                                tracingService.trace({id: navigation.extras.state.tracingId});
                                                                                                                                                });

                                                                                                                                                RouterModule

                                                                                                                                              constructor

                                                                                                                                              constructor(
                                                                                                                                              router: Router,
                                                                                                                                              route: ActivatedRoute,
                                                                                                                                              tabIndexAttribute: string,
                                                                                                                                              renderer: Renderer2,
                                                                                                                                              el: ElementRef
                                                                                                                                              );

                                                                                                                                                property fragment

                                                                                                                                                fragment?: string;
                                                                                                                                                • Passed to as part of the UrlCreationOptions.

                                                                                                                                                  See Also

                                                                                                                                                property ɵdir

                                                                                                                                                static ɵdir: i0.ɵɵDirectiveDeclaration<
                                                                                                                                                RouterLink,
                                                                                                                                                ':not(a):not(area)[routerLink]',
                                                                                                                                                never,
                                                                                                                                                {
                                                                                                                                                queryParams: 'queryParams';
                                                                                                                                                fragment: 'fragment';
                                                                                                                                                queryParamsHandling: 'queryParamsHandling';
                                                                                                                                                preserveFragment: 'preserveFragment';
                                                                                                                                                skipLocationChange: 'skipLocationChange';
                                                                                                                                                replaceUrl: 'replaceUrl';
                                                                                                                                                state: 'state';
                                                                                                                                                relativeTo: 'relativeTo';
                                                                                                                                                routerLink: 'routerLink';
                                                                                                                                                },
                                                                                                                                                {},
                                                                                                                                                never,
                                                                                                                                                never,
                                                                                                                                                false
                                                                                                                                                >;

                                                                                                                                                  property ɵfac

                                                                                                                                                  static ɵfac: i0.ɵɵFactoryDeclaration<
                                                                                                                                                  RouterLink,
                                                                                                                                                  [null, null, { attribute: 'tabindex' }, null, null]
                                                                                                                                                  >;

                                                                                                                                                    property preserveFragment

                                                                                                                                                    preserveFragment: boolean;
                                                                                                                                                    • Passed to as part of the UrlCreationOptions.

                                                                                                                                                      See Also

                                                                                                                                                    property queryParams

                                                                                                                                                    queryParams?: Params;
                                                                                                                                                    • Passed to as part of the UrlCreationOptions.

                                                                                                                                                      See Also

                                                                                                                                                    property queryParamsHandling

                                                                                                                                                    queryParamsHandling?: QueryParamsHandling;
                                                                                                                                                    • Passed to as part of the UrlCreationOptions.

                                                                                                                                                      See Also

                                                                                                                                                    property relativeTo

                                                                                                                                                    relativeTo?: ActivatedRoute;
                                                                                                                                                    • Passed to as part of the UrlCreationOptions. Specify a value here when you do not want to use the default value for routerLink, which is the current activated route. Note that a value of undefined here will use the routerLink default.

                                                                                                                                                      See Also

                                                                                                                                                    property replaceUrl

                                                                                                                                                    replaceUrl: boolean;
                                                                                                                                                    • Passed to as part of the NavigationBehaviorOptions.

                                                                                                                                                      See Also

                                                                                                                                                    property skipLocationChange

                                                                                                                                                    skipLocationChange: boolean;
                                                                                                                                                    • Passed to as part of the NavigationBehaviorOptions.

                                                                                                                                                      See Also

                                                                                                                                                    property state

                                                                                                                                                    state?: { [k: string]: any };
                                                                                                                                                    • Passed to as part of the NavigationBehaviorOptions.

                                                                                                                                                      See Also

                                                                                                                                                    property urlTree

                                                                                                                                                    readonly urlTree: UrlTree;

                                                                                                                                                      method ngOnChanges

                                                                                                                                                      ngOnChanges: (changes: SimpleChanges) => void;

                                                                                                                                                      method onClick

                                                                                                                                                      onClick: () => boolean;

                                                                                                                                                      class RouterLinkActive

                                                                                                                                                      class RouterLinkActive implements OnChanges, OnDestroy, AfterContentInit {}
                                                                                                                                                      • Tracks whether the linked route of an element is currently active, and allows you to specify one or more CSS classes to add to the element when the linked route is active.

                                                                                                                                                        Use this directive to create a visual distinction for elements associated with an active route. For example, the following code highlights the word "Bob" when the router activates the associated route:

                                                                                                                                                        <a routerLink="/user/bob" routerLinkActive="active-link">Bob</a>

                                                                                                                                                        Whenever the URL is either '/user' or '/user/bob', the "active-link" class is added to the anchor tag. If the URL changes, the class is removed.

                                                                                                                                                        You can set more than one class using a space-separated string or an array. For example:

                                                                                                                                                        <a routerLink="/user/bob" routerLinkActive="class1 class2">Bob</a>
                                                                                                                                                        <a routerLink="/user/bob" [routerLinkActive]="['class1', 'class2']">Bob</a>

                                                                                                                                                        To add the classes only when the URL matches the link exactly, add the option exact: true:

                                                                                                                                                        <a routerLink="/user/bob" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact:
                                                                                                                                                        true}">Bob</a>

                                                                                                                                                        To directly check the isActive status of the link, assign the RouterLinkActive instance to a template variable. For example, the following checks the status without assigning any CSS classes:

                                                                                                                                                        <a routerLink="/user/bob" routerLinkActive #rla="routerLinkActive">
                                                                                                                                                        Bob {{ rla.isActive ? '(already open)' : ''}}
                                                                                                                                                        </a>

                                                                                                                                                        You can apply the RouterLinkActive directive to an ancestor of linked elements. For example, the following sets the active-link class on the <div> parent tag when the URL is either '/user/jim' or '/user/bob'.

                                                                                                                                                        <div routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}">
                                                                                                                                                        <a routerLink="/user/jim">Jim</a>
                                                                                                                                                        <a routerLink="/user/bob">Bob</a>
                                                                                                                                                        </div>

                                                                                                                                                        The RouterLinkActive directive can also be used to set the aria-current attribute to provide an alternative distinction for active elements to visually impaired users.

                                                                                                                                                        For example, the following code adds the 'active' class to the Home Page link when it is indeed active and in such case also sets its aria-current attribute to 'page':

                                                                                                                                                        <a routerLink="/" routerLinkActive="active" ariaCurrentWhenActive="page">Home Page</a>

                                                                                                                                                        RouterModule

                                                                                                                                                      constructor

                                                                                                                                                      constructor(
                                                                                                                                                      router: Router,
                                                                                                                                                      element: ElementRef,
                                                                                                                                                      renderer: Renderer2,
                                                                                                                                                      cdr: ChangeDetectorRef,
                                                                                                                                                      link?: RouterLink,
                                                                                                                                                      linkWithHref?: RouterLinkWithHref
                                                                                                                                                      );

                                                                                                                                                        property ariaCurrentWhenActive

                                                                                                                                                        ariaCurrentWhenActive?: boolean | 'page' | 'step' | 'location' | 'date' | 'time';

                                                                                                                                                        property isActive

                                                                                                                                                        readonly isActive: boolean;

                                                                                                                                                          property isActiveChange

                                                                                                                                                          readonly isActiveChange: EventEmitter<boolean>;
                                                                                                                                                          • You can use the output isActiveChange to get notified each time the link becomes active or inactive.

                                                                                                                                                            Emits: true -> Route is active false -> Route is inactive

                                                                                                                                                            <a
                                                                                                                                                            routerLink="/user/bob"
                                                                                                                                                            routerLinkActive="active-link"
                                                                                                                                                            (isActiveChange)="this.onRouterLinkActive($event)">Bob</a>
                                                                                                                                                          links: QueryList<RouterLink>;

                                                                                                                                                            property linksWithHrefs

                                                                                                                                                            linksWithHrefs: QueryList<RouterLinkWithHref>;

                                                                                                                                                              property ɵdir

                                                                                                                                                              static ɵdir: i0.ɵɵDirectiveDeclaration<
                                                                                                                                                              RouterLinkActive,
                                                                                                                                                              '[routerLinkActive]',
                                                                                                                                                              ['routerLinkActive'],
                                                                                                                                                              {
                                                                                                                                                              routerLinkActiveOptions: 'routerLinkActiveOptions';
                                                                                                                                                              ariaCurrentWhenActive: 'ariaCurrentWhenActive';
                                                                                                                                                              routerLinkActive: 'routerLinkActive';
                                                                                                                                                              },
                                                                                                                                                              { isActiveChange: 'isActiveChange' },
                                                                                                                                                              ['links', 'linksWithHrefs'],
                                                                                                                                                              never,
                                                                                                                                                              false
                                                                                                                                                              >;

                                                                                                                                                                property ɵfac

                                                                                                                                                                static ɵfac: i0.ɵɵFactoryDeclaration<
                                                                                                                                                                RouterLinkActive,
                                                                                                                                                                [null, null, null, null, { optional: true }, { optional: true }]
                                                                                                                                                                >;

                                                                                                                                                                  property routerLinkActiveOptions

                                                                                                                                                                  routerLinkActiveOptions: IsActiveMatchOptions | { exact: boolean };
                                                                                                                                                                  • Options to configure how to determine if the router link is active.

                                                                                                                                                                    These options are passed to the Router.isActive() function.

                                                                                                                                                                    See Also

                                                                                                                                                                    • Router.isActive

                                                                                                                                                                  method ngAfterContentInit

                                                                                                                                                                  ngAfterContentInit: () => void;

                                                                                                                                                                  method ngOnChanges

                                                                                                                                                                  ngOnChanges: (changes: SimpleChanges) => void;

                                                                                                                                                                  method ngOnDestroy

                                                                                                                                                                  ngOnDestroy: () => void;

                                                                                                                                                                  class RouterLinkWithHref

                                                                                                                                                                  class RouterLinkWithHref implements OnChanges, OnDestroy {}
                                                                                                                                                                  • Lets you link to specific routes in your app.

                                                                                                                                                                    See RouterLink for more information.

                                                                                                                                                                    RouterModule

                                                                                                                                                                  constructor

                                                                                                                                                                  constructor(
                                                                                                                                                                  router: Router,
                                                                                                                                                                  route: ActivatedRoute,
                                                                                                                                                                  locationStrategy: LocationStrategy
                                                                                                                                                                  );

                                                                                                                                                                    property fragment

                                                                                                                                                                    fragment?: string;
                                                                                                                                                                    • Passed to as part of the UrlCreationOptions.

                                                                                                                                                                      See Also

                                                                                                                                                                    property href

                                                                                                                                                                    href: string;

                                                                                                                                                                      property ɵdir

                                                                                                                                                                      static ɵdir: i0.ɵɵDirectiveDeclaration<
                                                                                                                                                                      RouterLinkWithHref,
                                                                                                                                                                      'a[routerLink],area[routerLink]',
                                                                                                                                                                      never,
                                                                                                                                                                      {
                                                                                                                                                                      target: 'target';
                                                                                                                                                                      queryParams: 'queryParams';
                                                                                                                                                                      fragment: 'fragment';
                                                                                                                                                                      queryParamsHandling: 'queryParamsHandling';
                                                                                                                                                                      preserveFragment: 'preserveFragment';
                                                                                                                                                                      skipLocationChange: 'skipLocationChange';
                                                                                                                                                                      replaceUrl: 'replaceUrl';
                                                                                                                                                                      state: 'state';
                                                                                                                                                                      relativeTo: 'relativeTo';
                                                                                                                                                                      routerLink: 'routerLink';
                                                                                                                                                                      },
                                                                                                                                                                      {},
                                                                                                                                                                      never,
                                                                                                                                                                      never,
                                                                                                                                                                      false
                                                                                                                                                                      >;

                                                                                                                                                                        property ɵfac

                                                                                                                                                                        static ɵfac: i0.ɵɵFactoryDeclaration<RouterLinkWithHref, never>;

                                                                                                                                                                          property preserveFragment

                                                                                                                                                                          preserveFragment: boolean;
                                                                                                                                                                          • Passed to as part of the UrlCreationOptions.

                                                                                                                                                                            See Also

                                                                                                                                                                          property queryParams

                                                                                                                                                                          queryParams?: Params;
                                                                                                                                                                          • Passed to as part of the UrlCreationOptions.

                                                                                                                                                                            See Also

                                                                                                                                                                          property queryParamsHandling

                                                                                                                                                                          queryParamsHandling?: QueryParamsHandling;
                                                                                                                                                                          • Passed to as part of the UrlCreationOptions.

                                                                                                                                                                            See Also

                                                                                                                                                                          property relativeTo

                                                                                                                                                                          relativeTo?: ActivatedRoute;
                                                                                                                                                                          • Passed to as part of the UrlCreationOptions. Specify a value here when you do not want to use the default value for routerLink, which is the current activated route. Note that a value of undefined here will use the routerLink default.

                                                                                                                                                                            See Also

                                                                                                                                                                          property replaceUrl

                                                                                                                                                                          replaceUrl: boolean;
                                                                                                                                                                          • Passed to as part of the NavigationBehaviorOptions.

                                                                                                                                                                            See Also

                                                                                                                                                                          property skipLocationChange

                                                                                                                                                                          skipLocationChange: boolean;
                                                                                                                                                                          • Passed to as part of the NavigationBehaviorOptions.

                                                                                                                                                                            See Also

                                                                                                                                                                          property state

                                                                                                                                                                          state?: { [k: string]: any };
                                                                                                                                                                          • Passed to as part of the NavigationBehaviorOptions.

                                                                                                                                                                            See Also

                                                                                                                                                                          property target

                                                                                                                                                                          target: string;

                                                                                                                                                                            property urlTree

                                                                                                                                                                            readonly urlTree: UrlTree;

                                                                                                                                                                              method ngOnChanges

                                                                                                                                                                              ngOnChanges: (changes: SimpleChanges) => any;

                                                                                                                                                                              method ngOnDestroy

                                                                                                                                                                              ngOnDestroy: () => any;

                                                                                                                                                                              method onClick

                                                                                                                                                                              onClick: (
                                                                                                                                                                              button: number,
                                                                                                                                                                              ctrlKey: boolean,
                                                                                                                                                                              shiftKey: boolean,
                                                                                                                                                                              altKey: boolean,
                                                                                                                                                                              metaKey: boolean
                                                                                                                                                                              ) => boolean;

                                                                                                                                                                              class RouterModule

                                                                                                                                                                              class RouterModule {}
                                                                                                                                                                              • Adds directives and providers for in-app navigation among views defined in an application. Use the Angular Router service to declaratively specify application states and manage state transitions.

                                                                                                                                                                                You can import this NgModule multiple times, once for each lazy-loaded bundle. However, only one Router service can be active. To ensure this, there are two ways to register routes when importing this module:

                                                                                                                                                                                * The forRoot() method creates an NgModule that contains all the directives, the given routes, and the Router service itself. * The forChild() method creates an NgModule that contains all the directives and the given routes, but does not include the Router service.

                                                                                                                                                                                See Also

                                                                                                                                                                                • [Routing and Navigation guide](guide/router) for an overview of how the Router service should be used.

                                                                                                                                                                              constructor

                                                                                                                                                                              constructor(guard: any, router: Router);

                                                                                                                                                                                property ɵfac

                                                                                                                                                                                static ɵfac: i0.ɵɵFactoryDeclaration<
                                                                                                                                                                                RouterModule,
                                                                                                                                                                                [{ optional: true }, { optional: true }]
                                                                                                                                                                                >;

                                                                                                                                                                                  property ɵinj

                                                                                                                                                                                  static ɵinj: i0.ɵɵInjectorDeclaration<RouterModule>;

                                                                                                                                                                                    property ɵmod

                                                                                                                                                                                    static ɵmod: i0.ɵɵNgModuleDeclaration<
                                                                                                                                                                                    RouterModule,
                                                                                                                                                                                    [
                                                                                                                                                                                    typeof RouterOutlet,
                                                                                                                                                                                    typeof RouterLink,
                                                                                                                                                                                    typeof RouterLinkWithHref,
                                                                                                                                                                                    typeof RouterLinkActive,
                                                                                                                                                                                    typeof ɵEmptyOutletComponent
                                                                                                                                                                                    ],
                                                                                                                                                                                    never,
                                                                                                                                                                                    [
                                                                                                                                                                                    typeof RouterOutlet,
                                                                                                                                                                                    typeof RouterLink,
                                                                                                                                                                                    typeof RouterLinkWithHref,
                                                                                                                                                                                    typeof RouterLinkActive,
                                                                                                                                                                                    typeof ɵEmptyOutletComponent
                                                                                                                                                                                    ]
                                                                                                                                                                                    >;

                                                                                                                                                                                      method forChild

                                                                                                                                                                                      static forChild: (routes: Routes) => ModuleWithProviders<RouterModule>;
                                                                                                                                                                                      • Creates a module with all the router directives and a provider registering routes, without creating a new Router service. When registering for submodules and lazy-loaded submodules, create the NgModule as follows:

                                                                                                                                                                                        @NgModule({
                                                                                                                                                                                        imports: [RouterModule.forChild(ROUTES)]
                                                                                                                                                                                        })
                                                                                                                                                                                        class MyNgModule {}

                                                                                                                                                                                        Parameter routes

                                                                                                                                                                                        An array of Route objects that define the navigation paths for the submodule. The new NgModule.

                                                                                                                                                                                      method forRoot

                                                                                                                                                                                      static forRoot: (
                                                                                                                                                                                      routes: Routes,
                                                                                                                                                                                      config?: ExtraOptions
                                                                                                                                                                                      ) => ModuleWithProviders<RouterModule>;
                                                                                                                                                                                      • Creates and configures a module with all the router providers and directives. Optionally sets up an application listener to perform an initial navigation.

                                                                                                                                                                                        When registering the NgModule at the root, import as follows:

                                                                                                                                                                                        @NgModule({
                                                                                                                                                                                        imports: [RouterModule.forRoot(ROUTES)]
                                                                                                                                                                                        })
                                                                                                                                                                                        class MyNgModule {}

                                                                                                                                                                                        Parameter routes

                                                                                                                                                                                        An array of Route objects that define the navigation paths for the application.

                                                                                                                                                                                        Parameter config

                                                                                                                                                                                        An ExtraOptions configuration object that controls how navigation is performed. The new NgModule.

                                                                                                                                                                                      class RouterOutlet

                                                                                                                                                                                      class RouterOutlet implements OnDestroy, OnInit, RouterOutletContract {}
                                                                                                                                                                                      • Acts as a placeholder that Angular dynamically fills based on the current router state.

                                                                                                                                                                                        Each outlet can have a unique name, determined by the optional name attribute. The name cannot be set or changed dynamically. If not set, default value is "primary".

                                                                                                                                                                                        <router-outlet></router-outlet>
                                                                                                                                                                                        <router-outlet name='left'></router-outlet>
                                                                                                                                                                                        <router-outlet name='right'></router-outlet>

                                                                                                                                                                                        Named outlets can be the targets of secondary routes. The Route object for a secondary route has an outlet property to identify the target outlet:

                                                                                                                                                                                        {path: <base-path>, component: <component>, outlet: <target_outlet_name>}

                                                                                                                                                                                        Using named outlets and secondary routes, you can target multiple outlets in the same RouterLink directive.

                                                                                                                                                                                        The router keeps track of separate branches in a navigation tree for each named outlet and generates a representation of that tree in the URL. The URL for a secondary route uses the following syntax to specify both the primary and secondary routes at the same time:

                                                                                                                                                                                        http://base-path/primary-route-path(outlet-name:route-path)

                                                                                                                                                                                        A router outlet emits an activate event when a new component is instantiated, deactivate event when a component is destroyed. An attached event emits when the RouteReuseStrategy instructs the outlet to reattach the subtree, and the detached event emits when the RouteReuseStrategy instructs the outlet to detach the subtree.

                                                                                                                                                                                        <router-outlet
                                                                                                                                                                                        (activate)='onActivate($event)'
                                                                                                                                                                                        (deactivate)='onDeactivate($event)'
                                                                                                                                                                                        (attach)='onAttach($event)'
                                                                                                                                                                                        (detach)='onDetach($event)'></router-outlet>

                                                                                                                                                                                        See Also

                                                                                                                                                                                        • [Routing tutorial](guide/router-tutorial-toh#named-outlets "Example of a named outlet and secondary route configuration").

                                                                                                                                                                                        • RouterLink

                                                                                                                                                                                        • Route RouterModule

                                                                                                                                                                                      constructor

                                                                                                                                                                                      constructor(
                                                                                                                                                                                      parentContexts: ChildrenOutletContexts,
                                                                                                                                                                                      location: ViewContainerRef,
                                                                                                                                                                                      name: string,
                                                                                                                                                                                      changeDetector: ChangeDetectorRef,
                                                                                                                                                                                      environmentInjector: EnvironmentInjector
                                                                                                                                                                                      );

                                                                                                                                                                                        property activatedRoute

                                                                                                                                                                                        readonly activatedRoute: ActivatedRoute;

                                                                                                                                                                                          property activatedRouteData

                                                                                                                                                                                          readonly activatedRouteData: Data;

                                                                                                                                                                                            property activateEvents

                                                                                                                                                                                            activateEvents: EventEmitter<any>;

                                                                                                                                                                                              property attachEvents

                                                                                                                                                                                              attachEvents: EventEmitter<unknown>;
                                                                                                                                                                                              • Emits an attached component instance when the RouteReuseStrategy instructs to re-attach a previously detached subtree.

                                                                                                                                                                                              property component

                                                                                                                                                                                              readonly component: Object;
                                                                                                                                                                                              • Returns

                                                                                                                                                                                                The currently activated component instance.

                                                                                                                                                                                                Throws

                                                                                                                                                                                                An error if the outlet is not activated.

                                                                                                                                                                                              property deactivateEvents

                                                                                                                                                                                              deactivateEvents: EventEmitter<any>;

                                                                                                                                                                                                property detachEvents

                                                                                                                                                                                                detachEvents: EventEmitter<unknown>;
                                                                                                                                                                                                • Emits a detached component instance when the RouteReuseStrategy instructs to detach the subtree.

                                                                                                                                                                                                property isActivated

                                                                                                                                                                                                readonly isActivated: boolean;

                                                                                                                                                                                                  property ɵdir

                                                                                                                                                                                                  static ɵdir: i0.ɵɵDirectiveDeclaration<
                                                                                                                                                                                                  RouterOutlet,
                                                                                                                                                                                                  'router-outlet',
                                                                                                                                                                                                  ['outlet'],
                                                                                                                                                                                                  {},
                                                                                                                                                                                                  {
                                                                                                                                                                                                  activateEvents: 'activate';
                                                                                                                                                                                                  deactivateEvents: 'deactivate';
                                                                                                                                                                                                  attachEvents: 'attach';
                                                                                                                                                                                                  detachEvents: 'detach';
                                                                                                                                                                                                  },
                                                                                                                                                                                                  never,
                                                                                                                                                                                                  never,
                                                                                                                                                                                                  false
                                                                                                                                                                                                  >;

                                                                                                                                                                                                    property ɵfac

                                                                                                                                                                                                    static ɵfac: i0.ɵɵFactoryDeclaration<
                                                                                                                                                                                                    RouterOutlet,
                                                                                                                                                                                                    [null, null, { attribute: 'name' }, null, null]
                                                                                                                                                                                                    >;

                                                                                                                                                                                                      method activateWith

                                                                                                                                                                                                      activateWith: (
                                                                                                                                                                                                      activatedRoute: ActivatedRoute,
                                                                                                                                                                                                      resolverOrInjector?: ComponentFactoryResolver | EnvironmentInjector | null
                                                                                                                                                                                                      ) => void;

                                                                                                                                                                                                        method attach

                                                                                                                                                                                                        attach: (ref: ComponentRef<any>, activatedRoute: ActivatedRoute) => void;
                                                                                                                                                                                                        • Called when the RouteReuseStrategy instructs to re-attach a previously detached subtree

                                                                                                                                                                                                        method deactivate

                                                                                                                                                                                                        deactivate: () => void;

                                                                                                                                                                                                          method detach

                                                                                                                                                                                                          detach: () => ComponentRef<any>;
                                                                                                                                                                                                          • Called when the RouteReuseStrategy instructs to detach the subtree

                                                                                                                                                                                                          method ngOnDestroy

                                                                                                                                                                                                          ngOnDestroy: () => void;

                                                                                                                                                                                                          method ngOnInit

                                                                                                                                                                                                          ngOnInit: () => void;

                                                                                                                                                                                                          class RouterPreloader

                                                                                                                                                                                                          class RouterPreloader implements OnDestroy {}
                                                                                                                                                                                                          • The preloader optimistically loads all router configurations to make navigations into lazily-loaded sections of the application faster.

                                                                                                                                                                                                            The preloader runs in the background. When the router bootstraps, the preloader starts listening to all navigation events. After every such event, the preloader will check if any configurations can be loaded lazily.

                                                                                                                                                                                                            If a route is protected by canLoad guards, the preloaded will not load it.

                                                                                                                                                                                                          constructor

                                                                                                                                                                                                          constructor(
                                                                                                                                                                                                          router: Router,
                                                                                                                                                                                                          compiler: Compiler,
                                                                                                                                                                                                          injector: EnvironmentInjector,
                                                                                                                                                                                                          preloadingStrategy: PreloadingStrategy,
                                                                                                                                                                                                          loader: RouterConfigLoader
                                                                                                                                                                                                          );

                                                                                                                                                                                                            property ɵfac

                                                                                                                                                                                                            static ɵfac: i0.ɵɵFactoryDeclaration<RouterPreloader, never>;

                                                                                                                                                                                                              property ɵprov

                                                                                                                                                                                                              static ɵprov: i0.ɵɵInjectableDeclaration<RouterPreloader>;

                                                                                                                                                                                                                method ngOnDestroy

                                                                                                                                                                                                                ngOnDestroy: () => void;

                                                                                                                                                                                                                method preload

                                                                                                                                                                                                                preload: () => Observable<any>;

                                                                                                                                                                                                                  method setUpPreloading

                                                                                                                                                                                                                  setUpPreloading: () => void;

                                                                                                                                                                                                                    class RouterState

                                                                                                                                                                                                                    class RouterState extends Tree<ActivatedRoute> {}
                                                                                                                                                                                                                    • Represents the state of the router as a tree of activated routes.

                                                                                                                                                                                                                      Every node in the route tree is an ActivatedRoute instance that knows about the "consumed" URL segments, the extracted parameters, and the resolved data. Use the ActivatedRoute properties to traverse the tree from any node.

                                                                                                                                                                                                                      The following fragment shows how a component gets the root node of the current state to establish its own route tree:

                                                                                                                                                                                                                      @Component({templateUrl:'template.html'})
                                                                                                                                                                                                                      class MyComponent {
                                                                                                                                                                                                                      constructor(router: Router) {
                                                                                                                                                                                                                      const state: RouterState = router.routerState;
                                                                                                                                                                                                                      const root: ActivatedRoute = state.root;
                                                                                                                                                                                                                      const child = root.firstChild;
                                                                                                                                                                                                                      const id: Observable<string> = child.params.map(p => p.id);
                                                                                                                                                                                                                      //...
                                                                                                                                                                                                                      }
                                                                                                                                                                                                                      }

                                                                                                                                                                                                                      See Also

                                                                                                                                                                                                                      • ActivatedRoute

                                                                                                                                                                                                                      • [Getting route information](guide/router#getting-route-information)

                                                                                                                                                                                                                    property snapshot

                                                                                                                                                                                                                    snapshot: RouterStateSnapshot;
                                                                                                                                                                                                                    • The current snapshot of the router state

                                                                                                                                                                                                                    method toString

                                                                                                                                                                                                                    toString: () => string;

                                                                                                                                                                                                                      class RouterStateSnapshot

                                                                                                                                                                                                                      class RouterStateSnapshot extends Tree<ActivatedRouteSnapshot> {}
                                                                                                                                                                                                                      • Represents the state of the router at a moment in time.

                                                                                                                                                                                                                        This is a tree of activated route snapshots. Every node in this tree knows about the "consumed" URL segments, the extracted parameters, and the resolved data.

                                                                                                                                                                                                                        The following example shows how a component is initialized with information from the snapshot of the root node's state at the time of creation.

                                                                                                                                                                                                                        @Component({templateUrl:'template.html'})
                                                                                                                                                                                                                        class MyComponent {
                                                                                                                                                                                                                        constructor(router: Router) {
                                                                                                                                                                                                                        const state: RouterState = router.routerState;
                                                                                                                                                                                                                        const snapshot: RouterStateSnapshot = state.snapshot;
                                                                                                                                                                                                                        const root: ActivatedRouteSnapshot = snapshot.root;
                                                                                                                                                                                                                        const child = root.firstChild;
                                                                                                                                                                                                                        const id: Observable<string> = child.params.map(p => p.id);
                                                                                                                                                                                                                        //...
                                                                                                                                                                                                                        }
                                                                                                                                                                                                                        }

                                                                                                                                                                                                                      property url

                                                                                                                                                                                                                      url: string;
                                                                                                                                                                                                                      • The url from which this snapshot was created

                                                                                                                                                                                                                      method toString

                                                                                                                                                                                                                      toString: () => string;

                                                                                                                                                                                                                        class RoutesRecognized

                                                                                                                                                                                                                        class RoutesRecognized extends RouterEvent {}
                                                                                                                                                                                                                        • An event triggered when routes are recognized.

                                                                                                                                                                                                                        constructor

                                                                                                                                                                                                                        constructor(
                                                                                                                                                                                                                        id: number,
                                                                                                                                                                                                                        url: string,
                                                                                                                                                                                                                        urlAfterRedirects: string,
                                                                                                                                                                                                                        state: RouterStateSnapshot
                                                                                                                                                                                                                        );

                                                                                                                                                                                                                          property state

                                                                                                                                                                                                                          state: RouterStateSnapshot;

                                                                                                                                                                                                                          property type

                                                                                                                                                                                                                          readonly type: number;

                                                                                                                                                                                                                            property urlAfterRedirects

                                                                                                                                                                                                                            urlAfterRedirects: string;

                                                                                                                                                                                                                            method toString

                                                                                                                                                                                                                            toString: () => string;

                                                                                                                                                                                                                            class Scroll

                                                                                                                                                                                                                            class Scroll {}
                                                                                                                                                                                                                            • An event triggered by scrolling.

                                                                                                                                                                                                                            constructor

                                                                                                                                                                                                                            constructor(
                                                                                                                                                                                                                            routerEvent: NavigationEnd,
                                                                                                                                                                                                                            position: [number, number],
                                                                                                                                                                                                                            anchor: string
                                                                                                                                                                                                                            );

                                                                                                                                                                                                                              property anchor

                                                                                                                                                                                                                              readonly anchor: string;

                                                                                                                                                                                                                              property position

                                                                                                                                                                                                                              readonly position: [number, number];

                                                                                                                                                                                                                              property routerEvent

                                                                                                                                                                                                                              readonly routerEvent: NavigationEnd;

                                                                                                                                                                                                                              property type

                                                                                                                                                                                                                              readonly type: number;

                                                                                                                                                                                                                                method toString

                                                                                                                                                                                                                                toString: () => string;

                                                                                                                                                                                                                                  class TitleStrategy

                                                                                                                                                                                                                                  abstract class TitleStrategy {}
                                                                                                                                                                                                                                  • Provides a strategy for setting the page title after a router navigation.

                                                                                                                                                                                                                                    The built-in implementation traverses the router state snapshot and finds the deepest primary outlet with title property. Given the Routes below, navigating to /base/child(popup:aux) would result in the document title being set to "child".

                                                                                                                                                                                                                                    [
                                                                                                                                                                                                                                    {path: 'base', title: 'base', children: [
                                                                                                                                                                                                                                    {path: 'child', title: 'child'},
                                                                                                                                                                                                                                    ],
                                                                                                                                                                                                                                    {path: 'aux', outlet: 'popup', title: 'popupTitle'}
                                                                                                                                                                                                                                    ]

                                                                                                                                                                                                                                    This class can be used as a base class for custom title strategies. That is, you can create your own class that extends the TitleStrategy. Note that in the above example, the title from the named outlet is never used. However, a custom strategy might be implemented to incorporate titles in named outlets.

                                                                                                                                                                                                                                    See Also

                                                                                                                                                                                                                                    • [Page title guide](guide/router#setting-the-page-title)

                                                                                                                                                                                                                                  method buildTitle

                                                                                                                                                                                                                                  buildTitle: (snapshot: RouterStateSnapshot) => string | undefined;
                                                                                                                                                                                                                                  • Returns

                                                                                                                                                                                                                                    The title of the deepest primary route.

                                                                                                                                                                                                                                  method getResolvedTitleForRoute

                                                                                                                                                                                                                                  getResolvedTitleForRoute: (snapshot: ActivatedRouteSnapshot) => any;
                                                                                                                                                                                                                                  • Given an ActivatedRouteSnapshot, returns the final value of the Route.title property, which can either be a static string or a resolved value.

                                                                                                                                                                                                                                  method updateTitle

                                                                                                                                                                                                                                  abstract updateTitle: (snapshot: RouterStateSnapshot) => void;
                                                                                                                                                                                                                                  • Performs the application title update.

                                                                                                                                                                                                                                  class UrlHandlingStrategy

                                                                                                                                                                                                                                  abstract class UrlHandlingStrategy {}
                                                                                                                                                                                                                                  • Provides a way to migrate AngularJS applications to Angular.

                                                                                                                                                                                                                                  method extract

                                                                                                                                                                                                                                  abstract extract: (url: UrlTree) => UrlTree;
                                                                                                                                                                                                                                  • Extracts the part of the URL that should be handled by the router. The rest of the URL will remain untouched.

                                                                                                                                                                                                                                  method merge

                                                                                                                                                                                                                                  abstract merge: (newUrlPart: UrlTree, rawUrl: UrlTree) => UrlTree;
                                                                                                                                                                                                                                  • Merges the URL fragment with the rest of the URL.

                                                                                                                                                                                                                                  method shouldProcessUrl

                                                                                                                                                                                                                                  abstract shouldProcessUrl: (url: UrlTree) => boolean;
                                                                                                                                                                                                                                  • Tells the router if this URL should be processed.

                                                                                                                                                                                                                                    When it returns true, the router will execute the regular navigation. When it returns false, the router will set the router state to an empty state. As a result, all the active components will be destroyed.

                                                                                                                                                                                                                                  class UrlSegment

                                                                                                                                                                                                                                  class UrlSegment {}
                                                                                                                                                                                                                                  • Represents a single URL segment.

                                                                                                                                                                                                                                    A UrlSegment is a part of a URL between the two slashes. It contains a path and the matrix parameters associated with the segment.

                                                                                                                                                                                                                                    ### Example

                                                                                                                                                                                                                                    @Component({templateUrl:'template.html'})
                                                                                                                                                                                                                                    class MyComponent {
                                                                                                                                                                                                                                    constructor(router: Router) {
                                                                                                                                                                                                                                    const tree: UrlTree = router.parseUrl('/team;id=33');
                                                                                                                                                                                                                                    const g: UrlSegmentGroup = tree.root.children[PRIMARY_OUTLET];
                                                                                                                                                                                                                                    const s: UrlSegment[] = g.segments;
                                                                                                                                                                                                                                    s[0].path; // returns 'team'
                                                                                                                                                                                                                                    s[0].parameters; // returns {id: 33}
                                                                                                                                                                                                                                    }
                                                                                                                                                                                                                                    }

                                                                                                                                                                                                                                  constructor

                                                                                                                                                                                                                                  constructor(path: string, parameters: { [name: string]: string });

                                                                                                                                                                                                                                    property parameterMap

                                                                                                                                                                                                                                    readonly parameterMap: ParamMap;

                                                                                                                                                                                                                                      property parameters

                                                                                                                                                                                                                                      parameters: { [name: string]: string };
                                                                                                                                                                                                                                      • The matrix parameters associated with a segment

                                                                                                                                                                                                                                      property path

                                                                                                                                                                                                                                      path: string;
                                                                                                                                                                                                                                      • The path part of a URL segment

                                                                                                                                                                                                                                      method toString

                                                                                                                                                                                                                                      toString: () => string;

                                                                                                                                                                                                                                      class UrlSegmentGroup

                                                                                                                                                                                                                                      class UrlSegmentGroup {}
                                                                                                                                                                                                                                      • Represents the parsed URL segment group.

                                                                                                                                                                                                                                        See UrlTree for more information.

                                                                                                                                                                                                                                      constructor

                                                                                                                                                                                                                                      constructor(
                                                                                                                                                                                                                                      segments: UrlSegment[],
                                                                                                                                                                                                                                      children: { [key: string]: UrlSegmentGroup }
                                                                                                                                                                                                                                      );

                                                                                                                                                                                                                                        property children

                                                                                                                                                                                                                                        children: { [key: string]: UrlSegmentGroup };
                                                                                                                                                                                                                                        • The list of children of this group

                                                                                                                                                                                                                                        property numberOfChildren

                                                                                                                                                                                                                                        readonly numberOfChildren: number;
                                                                                                                                                                                                                                        • Number of child segments

                                                                                                                                                                                                                                        property parent

                                                                                                                                                                                                                                        parent: UrlSegmentGroup;
                                                                                                                                                                                                                                        • The parent node in the url tree

                                                                                                                                                                                                                                        property segments

                                                                                                                                                                                                                                        segments: UrlSegment[];
                                                                                                                                                                                                                                        • The URL segments of this group. See UrlSegment for more information

                                                                                                                                                                                                                                        method hasChildren

                                                                                                                                                                                                                                        hasChildren: () => boolean;
                                                                                                                                                                                                                                        • Whether the segment has child segments

                                                                                                                                                                                                                                        method toString

                                                                                                                                                                                                                                        toString: () => string;

                                                                                                                                                                                                                                        class UrlSerializer

                                                                                                                                                                                                                                        abstract class UrlSerializer {}
                                                                                                                                                                                                                                        • Serializes and deserializes a URL string into a URL tree.

                                                                                                                                                                                                                                          The url serialization strategy is customizable. You can make all URLs case insensitive by providing a custom UrlSerializer.

                                                                                                                                                                                                                                          See DefaultUrlSerializer for an example of a URL serializer.

                                                                                                                                                                                                                                        method parse

                                                                                                                                                                                                                                        abstract parse: (url: string) => UrlTree;
                                                                                                                                                                                                                                        • Parse a url into a UrlTree

                                                                                                                                                                                                                                        method serialize

                                                                                                                                                                                                                                        abstract serialize: (tree: UrlTree) => string;
                                                                                                                                                                                                                                        • Converts a UrlTree into a url

                                                                                                                                                                                                                                        class UrlTree

                                                                                                                                                                                                                                        class UrlTree {}
                                                                                                                                                                                                                                        • Represents the parsed URL.

                                                                                                                                                                                                                                          Since a router state is a tree, and the URL is nothing but a serialized state, the URL is a serialized tree. UrlTree is a data structure that provides a lot of affordances in dealing with URLs

                                                                                                                                                                                                                                          ### Example

                                                                                                                                                                                                                                          @Component({templateUrl:'template.html'})
                                                                                                                                                                                                                                          class MyComponent {
                                                                                                                                                                                                                                          constructor(router: Router) {
                                                                                                                                                                                                                                          const tree: UrlTree =
                                                                                                                                                                                                                                          router.parseUrl('/team/33/(user/victor//support:help)?debug=true#fragment');
                                                                                                                                                                                                                                          const f = tree.fragment; // return 'fragment'
                                                                                                                                                                                                                                          const q = tree.queryParams; // returns {debug: 'true'}
                                                                                                                                                                                                                                          const g: UrlSegmentGroup = tree.root.children[PRIMARY_OUTLET];
                                                                                                                                                                                                                                          const s: UrlSegment[] = g.segments; // returns 2 segments 'team' and '33'
                                                                                                                                                                                                                                          g.children[PRIMARY_OUTLET].segments; // returns 2 segments 'user' and 'victor'
                                                                                                                                                                                                                                          g.children['support'].segments; // return 1 segment 'help'
                                                                                                                                                                                                                                          }
                                                                                                                                                                                                                                          }

                                                                                                                                                                                                                                        property fragment

                                                                                                                                                                                                                                        fragment: string;
                                                                                                                                                                                                                                        • The fragment of the URL

                                                                                                                                                                                                                                        property queryParamMap

                                                                                                                                                                                                                                        readonly queryParamMap: ParamMap;

                                                                                                                                                                                                                                          property queryParams

                                                                                                                                                                                                                                          queryParams: Params;
                                                                                                                                                                                                                                          • The query params of the URL

                                                                                                                                                                                                                                          property root

                                                                                                                                                                                                                                          root: UrlSegmentGroup;
                                                                                                                                                                                                                                          • The root segment group of the URL tree

                                                                                                                                                                                                                                          method toString

                                                                                                                                                                                                                                          toString: () => string;

                                                                                                                                                                                                                                          Interfaces

                                                                                                                                                                                                                                          interface CanActivate

                                                                                                                                                                                                                                          interface CanActivate {}
                                                                                                                                                                                                                                          • Interface that a class can implement to be a guard deciding if a route can be activated. If all guards return true, navigation continues. If any guard returns false, navigation is cancelled. If any guard returns a UrlTree, the current navigation is cancelled and a new navigation begins to the UrlTree returned from the guard.

                                                                                                                                                                                                                                            The following example implements a CanActivate function that checks whether the current user has permission to activate the requested route.

                                                                                                                                                                                                                                            class UserToken {}
                                                                                                                                                                                                                                            class Permissions {
                                                                                                                                                                                                                                            canActivate(user: UserToken, id: string): boolean {
                                                                                                                                                                                                                                            return true;
                                                                                                                                                                                                                                            }
                                                                                                                                                                                                                                            }
                                                                                                                                                                                                                                            @Injectable()
                                                                                                                                                                                                                                            class CanActivateTeam implements CanActivate {
                                                                                                                                                                                                                                            constructor(private permissions: Permissions, private currentUser: UserToken) {}
                                                                                                                                                                                                                                            canActivate(
                                                                                                                                                                                                                                            route: ActivatedRouteSnapshot,
                                                                                                                                                                                                                                            state: RouterStateSnapshot
                                                                                                                                                                                                                                            ): Observable<boolean|UrlTree>|Promise<boolean|UrlTree>|boolean|UrlTree {
                                                                                                                                                                                                                                            return this.permissions.canActivate(this.currentUser, route.params.id);
                                                                                                                                                                                                                                            }
                                                                                                                                                                                                                                            }

                                                                                                                                                                                                                                            Here, the defined guard function is provided as part of the Route object in the router configuration:

                                                                                                                                                                                                                                            @NgModule({
                                                                                                                                                                                                                                            imports: [
                                                                                                                                                                                                                                            RouterModule.forRoot([
                                                                                                                                                                                                                                            {
                                                                                                                                                                                                                                            path: 'team/:id',
                                                                                                                                                                                                                                            component: TeamComponent,
                                                                                                                                                                                                                                            canActivate: [CanActivateTeam]
                                                                                                                                                                                                                                            }
                                                                                                                                                                                                                                            ])
                                                                                                                                                                                                                                            ],
                                                                                                                                                                                                                                            providers: [CanActivateTeam, UserToken, Permissions]
                                                                                                                                                                                                                                            })
                                                                                                                                                                                                                                            class AppModule {}

                                                                                                                                                                                                                                            You can alternatively provide an in-line function with the canActivate signature:

                                                                                                                                                                                                                                            @NgModule({
                                                                                                                                                                                                                                            imports: [
                                                                                                                                                                                                                                            RouterModule.forRoot([
                                                                                                                                                                                                                                            {
                                                                                                                                                                                                                                            path: 'team/:id',
                                                                                                                                                                                                                                            component: TeamComponent,
                                                                                                                                                                                                                                            canActivate: ['canActivateTeam']
                                                                                                                                                                                                                                            }
                                                                                                                                                                                                                                            ])
                                                                                                                                                                                                                                            ],
                                                                                                                                                                                                                                            providers: [
                                                                                                                                                                                                                                            {
                                                                                                                                                                                                                                            provide: 'canActivateTeam',
                                                                                                                                                                                                                                            useValue: (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => true
                                                                                                                                                                                                                                            }
                                                                                                                                                                                                                                            ]
                                                                                                                                                                                                                                            })
                                                                                                                                                                                                                                            class AppModule {}

                                                                                                                                                                                                                                          method canActivate

                                                                                                                                                                                                                                          canActivate: (
                                                                                                                                                                                                                                          route: ActivatedRouteSnapshot,
                                                                                                                                                                                                                                          state: RouterStateSnapshot
                                                                                                                                                                                                                                          ) =>
                                                                                                                                                                                                                                          | Observable<boolean | UrlTree>
                                                                                                                                                                                                                                          | Promise<boolean | UrlTree>
                                                                                                                                                                                                                                          | boolean
                                                                                                                                                                                                                                          | UrlTree;

                                                                                                                                                                                                                                            interface CanActivateChild

                                                                                                                                                                                                                                            interface CanActivateChild {}
                                                                                                                                                                                                                                            • Interface that a class can implement to be a guard deciding if a child route can be activated. If all guards return true, navigation continues. If any guard returns false, navigation is cancelled. If any guard returns a UrlTree, current navigation is cancelled and a new navigation begins to the UrlTree returned from the guard.

                                                                                                                                                                                                                                              The following example implements a CanActivateChild function that checks whether the current user has permission to activate the requested child route.

                                                                                                                                                                                                                                              class UserToken {}
                                                                                                                                                                                                                                              class Permissions {
                                                                                                                                                                                                                                              canActivate(user: UserToken, id: string): boolean {
                                                                                                                                                                                                                                              return true;
                                                                                                                                                                                                                                              }
                                                                                                                                                                                                                                              }
                                                                                                                                                                                                                                              @Injectable()
                                                                                                                                                                                                                                              class CanActivateTeam implements CanActivateChild {
                                                                                                                                                                                                                                              constructor(private permissions: Permissions, private currentUser: UserToken) {}
                                                                                                                                                                                                                                              canActivateChild(
                                                                                                                                                                                                                                              route: ActivatedRouteSnapshot,
                                                                                                                                                                                                                                              state: RouterStateSnapshot
                                                                                                                                                                                                                                              ): Observable<boolean|UrlTree>|Promise<boolean|UrlTree>|boolean|UrlTree {
                                                                                                                                                                                                                                              return this.permissions.canActivate(this.currentUser, route.params.id);
                                                                                                                                                                                                                                              }
                                                                                                                                                                                                                                              }

                                                                                                                                                                                                                                              Here, the defined guard function is provided as part of the Route object in the router configuration:

                                                                                                                                                                                                                                              @NgModule({
                                                                                                                                                                                                                                              imports: [
                                                                                                                                                                                                                                              RouterModule.forRoot([
                                                                                                                                                                                                                                              {
                                                                                                                                                                                                                                              path: 'root',
                                                                                                                                                                                                                                              canActivateChild: [CanActivateTeam],
                                                                                                                                                                                                                                              children: [
                                                                                                                                                                                                                                              {
                                                                                                                                                                                                                                              path: 'team/:id',
                                                                                                                                                                                                                                              component: TeamComponent
                                                                                                                                                                                                                                              }
                                                                                                                                                                                                                                              ]
                                                                                                                                                                                                                                              }
                                                                                                                                                                                                                                              ])
                                                                                                                                                                                                                                              ],
                                                                                                                                                                                                                                              providers: [CanActivateTeam, UserToken, Permissions]
                                                                                                                                                                                                                                              })
                                                                                                                                                                                                                                              class AppModule {}

                                                                                                                                                                                                                                              You can alternatively provide an in-line function with the canActivateChild signature:

                                                                                                                                                                                                                                              @NgModule({
                                                                                                                                                                                                                                              imports: [
                                                                                                                                                                                                                                              RouterModule.forRoot([
                                                                                                                                                                                                                                              {
                                                                                                                                                                                                                                              path: 'root',
                                                                                                                                                                                                                                              canActivateChild: ['canActivateTeam'],
                                                                                                                                                                                                                                              children: [
                                                                                                                                                                                                                                              {
                                                                                                                                                                                                                                              path: 'team/:id',
                                                                                                                                                                                                                                              component: TeamComponent
                                                                                                                                                                                                                                              }
                                                                                                                                                                                                                                              ]
                                                                                                                                                                                                                                              }
                                                                                                                                                                                                                                              ])
                                                                                                                                                                                                                                              ],
                                                                                                                                                                                                                                              providers: [
                                                                                                                                                                                                                                              {
                                                                                                                                                                                                                                              provide: 'canActivateTeam',
                                                                                                                                                                                                                                              useValue: (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => true
                                                                                                                                                                                                                                              }
                                                                                                                                                                                                                                              ]
                                                                                                                                                                                                                                              })
                                                                                                                                                                                                                                              class AppModule {}

                                                                                                                                                                                                                                            method canActivateChild

                                                                                                                                                                                                                                            canActivateChild: (
                                                                                                                                                                                                                                            childRoute: ActivatedRouteSnapshot,
                                                                                                                                                                                                                                            state: RouterStateSnapshot
                                                                                                                                                                                                                                            ) =>
                                                                                                                                                                                                                                            | Observable<boolean | UrlTree>
                                                                                                                                                                                                                                            | Promise<boolean | UrlTree>
                                                                                                                                                                                                                                            | boolean
                                                                                                                                                                                                                                            | UrlTree;

                                                                                                                                                                                                                                              interface CanDeactivate

                                                                                                                                                                                                                                              interface CanDeactivate<T> {}
                                                                                                                                                                                                                                              • Interface that a class can implement to be a guard deciding if a route can be deactivated. If all guards return true, navigation continues. If any guard returns false, navigation is cancelled. If any guard returns a UrlTree, current navigation is cancelled and a new navigation begins to the UrlTree returned from the guard.

                                                                                                                                                                                                                                                The following example implements a CanDeactivate function that checks whether the current user has permission to deactivate the requested route.

                                                                                                                                                                                                                                                class UserToken {}
                                                                                                                                                                                                                                                class Permissions {
                                                                                                                                                                                                                                                canDeactivate(user: UserToken, id: string): boolean {
                                                                                                                                                                                                                                                return true;
                                                                                                                                                                                                                                                }
                                                                                                                                                                                                                                                }

                                                                                                                                                                                                                                                Here, the defined guard function is provided as part of the Route object in the router configuration:

                                                                                                                                                                                                                                                @Injectable()
                                                                                                                                                                                                                                                class CanDeactivateTeam implements CanDeactivate<TeamComponent> {
                                                                                                                                                                                                                                                constructor(private permissions: Permissions, private currentUser: UserToken) {}
                                                                                                                                                                                                                                                canDeactivate(
                                                                                                                                                                                                                                                component: TeamComponent,
                                                                                                                                                                                                                                                currentRoute: ActivatedRouteSnapshot,
                                                                                                                                                                                                                                                currentState: RouterStateSnapshot,
                                                                                                                                                                                                                                                nextState: RouterStateSnapshot
                                                                                                                                                                                                                                                ): Observable<boolean|UrlTree>|Promise<boolean|UrlTree>|boolean|UrlTree {
                                                                                                                                                                                                                                                return this.permissions.canDeactivate(this.currentUser, route.params.id);
                                                                                                                                                                                                                                                }
                                                                                                                                                                                                                                                }
                                                                                                                                                                                                                                                @NgModule({
                                                                                                                                                                                                                                                imports: [
                                                                                                                                                                                                                                                RouterModule.forRoot([
                                                                                                                                                                                                                                                {
                                                                                                                                                                                                                                                path: 'team/:id',
                                                                                                                                                                                                                                                component: TeamComponent,
                                                                                                                                                                                                                                                canDeactivate: [CanDeactivateTeam]
                                                                                                                                                                                                                                                }
                                                                                                                                                                                                                                                ])
                                                                                                                                                                                                                                                ],
                                                                                                                                                                                                                                                providers: [CanDeactivateTeam, UserToken, Permissions]
                                                                                                                                                                                                                                                })
                                                                                                                                                                                                                                                class AppModule {}

                                                                                                                                                                                                                                                You can alternatively provide an in-line function with the canDeactivate signature:

                                                                                                                                                                                                                                                @NgModule({
                                                                                                                                                                                                                                                imports: [
                                                                                                                                                                                                                                                RouterModule.forRoot([
                                                                                                                                                                                                                                                {
                                                                                                                                                                                                                                                path: 'team/:id',
                                                                                                                                                                                                                                                component: TeamComponent,
                                                                                                                                                                                                                                                canDeactivate: ['canDeactivateTeam']
                                                                                                                                                                                                                                                }
                                                                                                                                                                                                                                                ])
                                                                                                                                                                                                                                                ],
                                                                                                                                                                                                                                                providers: [
                                                                                                                                                                                                                                                {
                                                                                                                                                                                                                                                provide: 'canDeactivateTeam',
                                                                                                                                                                                                                                                useValue: (component: TeamComponent, currentRoute: ActivatedRouteSnapshot, currentState:
                                                                                                                                                                                                                                                RouterStateSnapshot, nextState: RouterStateSnapshot) => true
                                                                                                                                                                                                                                                }
                                                                                                                                                                                                                                                ]
                                                                                                                                                                                                                                                })
                                                                                                                                                                                                                                                class AppModule {}

                                                                                                                                                                                                                                              method canDeactivate

                                                                                                                                                                                                                                              canDeactivate: (
                                                                                                                                                                                                                                              component: T,
                                                                                                                                                                                                                                              currentRoute: ActivatedRouteSnapshot,
                                                                                                                                                                                                                                              currentState: RouterStateSnapshot,
                                                                                                                                                                                                                                              nextState?: RouterStateSnapshot
                                                                                                                                                                                                                                              ) =>
                                                                                                                                                                                                                                              | Observable<boolean | UrlTree>
                                                                                                                                                                                                                                              | Promise<boolean | UrlTree>
                                                                                                                                                                                                                                              | boolean
                                                                                                                                                                                                                                              | UrlTree;

                                                                                                                                                                                                                                                interface CanLoad

                                                                                                                                                                                                                                                interface CanLoad {}
                                                                                                                                                                                                                                                • Interface that a class can implement to be a guard deciding if children can be loaded. If all guards return true, navigation continues. If any guard returns false, navigation is cancelled. If any guard returns a UrlTree, current navigation is cancelled and a new navigation starts to the UrlTree returned from the guard.

                                                                                                                                                                                                                                                  The following example implements a CanLoad function that decides whether the current user has permission to load requested child routes.

                                                                                                                                                                                                                                                  class UserToken {}
                                                                                                                                                                                                                                                  class Permissions {
                                                                                                                                                                                                                                                  canLoadChildren(user: UserToken, id: string, segments: UrlSegment[]): boolean {
                                                                                                                                                                                                                                                  return true;
                                                                                                                                                                                                                                                  }
                                                                                                                                                                                                                                                  }
                                                                                                                                                                                                                                                  @Injectable()
                                                                                                                                                                                                                                                  class CanLoadTeamSection implements CanLoad {
                                                                                                                                                                                                                                                  constructor(private permissions: Permissions, private currentUser: UserToken) {}
                                                                                                                                                                                                                                                  canLoad(route: Route, segments: UrlSegment[]): Observable<boolean>|Promise<boolean>|boolean {
                                                                                                                                                                                                                                                  return this.permissions.canLoadChildren(this.currentUser, route, segments);
                                                                                                                                                                                                                                                  }
                                                                                                                                                                                                                                                  }

                                                                                                                                                                                                                                                  Here, the defined guard function is provided as part of the Route object in the router configuration:

                                                                                                                                                                                                                                                  @NgModule({
                                                                                                                                                                                                                                                  imports: [
                                                                                                                                                                                                                                                  RouterModule.forRoot([
                                                                                                                                                                                                                                                  {
                                                                                                                                                                                                                                                  path: 'team/:id',
                                                                                                                                                                                                                                                  component: TeamComponent,
                                                                                                                                                                                                                                                  loadChildren: () => import('./team').then(mod => mod.TeamModule),
                                                                                                                                                                                                                                                  canLoad: [CanLoadTeamSection]
                                                                                                                                                                                                                                                  }
                                                                                                                                                                                                                                                  ])
                                                                                                                                                                                                                                                  ],
                                                                                                                                                                                                                                                  providers: [CanLoadTeamSection, UserToken, Permissions]
                                                                                                                                                                                                                                                  })
                                                                                                                                                                                                                                                  class AppModule {}

                                                                                                                                                                                                                                                  You can alternatively provide an in-line function with the canLoad signature:

                                                                                                                                                                                                                                                  @NgModule({
                                                                                                                                                                                                                                                  imports: [
                                                                                                                                                                                                                                                  RouterModule.forRoot([
                                                                                                                                                                                                                                                  {
                                                                                                                                                                                                                                                  path: 'team/:id',
                                                                                                                                                                                                                                                  component: TeamComponent,
                                                                                                                                                                                                                                                  loadChildren: () => import('./team').then(mod => mod.TeamModule),
                                                                                                                                                                                                                                                  canLoad: ['canLoadTeamSection']
                                                                                                                                                                                                                                                  }
                                                                                                                                                                                                                                                  ])
                                                                                                                                                                                                                                                  ],
                                                                                                                                                                                                                                                  providers: [
                                                                                                                                                                                                                                                  {
                                                                                                                                                                                                                                                  provide: 'canLoadTeamSection',
                                                                                                                                                                                                                                                  useValue: (route: Route, segments: UrlSegment[]) => true
                                                                                                                                                                                                                                                  }
                                                                                                                                                                                                                                                  ]
                                                                                                                                                                                                                                                  })
                                                                                                                                                                                                                                                  class AppModule {}

                                                                                                                                                                                                                                                method canLoad

                                                                                                                                                                                                                                                canLoad: (
                                                                                                                                                                                                                                                route: Route,
                                                                                                                                                                                                                                                segments: UrlSegment[]
                                                                                                                                                                                                                                                ) =>
                                                                                                                                                                                                                                                | Observable<boolean | UrlTree>
                                                                                                                                                                                                                                                | Promise<boolean | UrlTree>
                                                                                                                                                                                                                                                | boolean
                                                                                                                                                                                                                                                | UrlTree;

                                                                                                                                                                                                                                                  interface ExtraOptions

                                                                                                                                                                                                                                                  interface ExtraOptions {}
                                                                                                                                                                                                                                                  • A set of configuration options for a router module, provided in the forRoot() method.

                                                                                                                                                                                                                                                    See Also

                                                                                                                                                                                                                                                    • forRoot()

                                                                                                                                                                                                                                                  property anchorScrolling

                                                                                                                                                                                                                                                  anchorScrolling?: 'disabled' | 'enabled';
                                                                                                                                                                                                                                                  • When set to 'enabled', scrolls to the anchor element when the URL has a fragment. Anchor scrolling is disabled by default.

                                                                                                                                                                                                                                                    Anchor scrolling does not happen on 'popstate'. Instead, we restore the position that we stored or scroll to the top.

                                                                                                                                                                                                                                                  property canceledNavigationResolution

                                                                                                                                                                                                                                                  canceledNavigationResolution?: 'replace' | 'computed';
                                                                                                                                                                                                                                                  • Configures how the Router attempts to restore state when a navigation is cancelled.

                                                                                                                                                                                                                                                    'replace' - Always uses location.replaceState to set the browser state to the state of the router before the navigation started. This means that if the URL of the browser is updated _before_ the navigation is canceled, the Router will simply replace the item in history rather than trying to restore to the previous location in the session history. This happens most frequently with urlUpdateStrategy: 'eager' and navigations with the browser back/forward buttons.

                                                                                                                                                                                                                                                    'computed' - Will attempt to return to the same index in the session history that corresponds to the Angular route when the navigation gets cancelled. For example, if the browser back button is clicked and the navigation is cancelled, the Router will trigger a forward navigation and vice versa.

                                                                                                                                                                                                                                                    Note: the 'computed' option is incompatible with any UrlHandlingStrategy which only handles a portion of the URL because the history restoration navigates to the previous place in the browser history rather than simply resetting a portion of the URL.

                                                                                                                                                                                                                                                    The default value is replace when not set.

                                                                                                                                                                                                                                                  property enableTracing

                                                                                                                                                                                                                                                  enableTracing?: boolean;
                                                                                                                                                                                                                                                  • When true, log all internal navigation events to the console. Use for debugging.

                                                                                                                                                                                                                                                  property errorHandler

                                                                                                                                                                                                                                                  errorHandler?: ErrorHandler;
                                                                                                                                                                                                                                                  • A custom error handler for failed navigations. If the handler returns a value, the navigation Promise is resolved with this value. If the handler throws an exception, the navigation Promise is rejected with the exception.

                                                                                                                                                                                                                                                  property initialNavigation

                                                                                                                                                                                                                                                  initialNavigation?: InitialNavigation;
                                                                                                                                                                                                                                                  • One of enabled, enabledBlocking, enabledNonBlocking or disabled. When set to enabled or enabledBlocking, the initial navigation starts before the root component is created. The bootstrap is blocked until the initial navigation is complete. This value is required for [server-side rendering](guide/universal) to work. When set to enabledNonBlocking, the initial navigation starts after the root component has been created. The bootstrap is not blocked on the completion of the initial navigation. When set to disabled, the initial navigation is not performed. The location listener is set up before the root component gets created. Use if there is a reason to have more control over when the router starts its initial navigation due to some complex initialization logic.

                                                                                                                                                                                                                                                  property malformedUriErrorHandler

                                                                                                                                                                                                                                                  malformedUriErrorHandler?: (
                                                                                                                                                                                                                                                  error: URIError,
                                                                                                                                                                                                                                                  urlSerializer: UrlSerializer,
                                                                                                                                                                                                                                                  url: string
                                                                                                                                                                                                                                                  ) => UrlTree;
                                                                                                                                                                                                                                                  • A custom handler for malformed URI errors. The handler is invoked when encodedURI contains invalid character sequences. The default implementation is to redirect to the root URL, dropping any path or parameter information. The function takes three parameters:

                                                                                                                                                                                                                                                    - 'URIError' - Error thrown when parsing a bad URL. - 'UrlSerializer' - UrlSerializer that’s configured with the router. - 'url' - The malformed URL that caused the URIError

                                                                                                                                                                                                                                                  property onSameUrlNavigation

                                                                                                                                                                                                                                                  onSameUrlNavigation?: 'reload' | 'ignore';
                                                                                                                                                                                                                                                  • Define what the router should do if it receives a navigation request to the current URL. Default is ignore, which causes the router ignores the navigation. This can disable features such as a "refresh" button. Use this option to configure the behavior when navigating to the current URL. Default is 'ignore'.

                                                                                                                                                                                                                                                  property paramsInheritanceStrategy

                                                                                                                                                                                                                                                  paramsInheritanceStrategy?: 'emptyOnly' | 'always';
                                                                                                                                                                                                                                                  • Defines how the router merges parameters, data, and resolved data from parent to child routes. By default ('emptyOnly'), inherits parent parameters only for path-less or component-less routes.

                                                                                                                                                                                                                                                    Set to 'always' to enable unconditional inheritance of parent parameters.

                                                                                                                                                                                                                                                    Note that when dealing with matrix parameters, "parent" refers to the parent Route config which does not necessarily mean the "URL segment to the left". When the Route path contains multiple segments, the matrix parameters must appear on the last segment. For example, matrix parameters for {path: 'a/b', component: MyComp} should appear as a/b;foo=bar and not a;foo=bar/b.

                                                                                                                                                                                                                                                  property preloadingStrategy

                                                                                                                                                                                                                                                  preloadingStrategy?: any;
                                                                                                                                                                                                                                                  • Configures a preloading strategy. One of PreloadAllModules or NoPreloading (the default).

                                                                                                                                                                                                                                                  property relativeLinkResolution

                                                                                                                                                                                                                                                  relativeLinkResolution?: 'legacy' | 'corrected';
                                                                                                                                                                                                                                                  • Enables a bug fix that corrects relative link resolution in components with empty paths. Example:

                                                                                                                                                                                                                                                    const routes = [
                                                                                                                                                                                                                                                    {
                                                                                                                                                                                                                                                    path: '',
                                                                                                                                                                                                                                                    component: ContainerComponent,
                                                                                                                                                                                                                                                    children: [
                                                                                                                                                                                                                                                    { path: 'a', component: AComponent },
                                                                                                                                                                                                                                                    { path: 'b', component: BComponent },
                                                                                                                                                                                                                                                    ]
                                                                                                                                                                                                                                                    }
                                                                                                                                                                                                                                                    ];

                                                                                                                                                                                                                                                    From the ContainerComponent, you should be able to navigate to AComponent using the following routerLink, but it will not work if relativeLinkResolution is set to 'legacy':

                                                                                                                                                                                                                                                    <a [routerLink]="['./a']">Link to A</a>

                                                                                                                                                                                                                                                    However, this will work:

                                                                                                                                                                                                                                                    <a [routerLink]="['../a']">Link to A</a>

                                                                                                                                                                                                                                                    In other words, you're required to use ../ rather than ./ when the relative link resolution is set to 'legacy'.

                                                                                                                                                                                                                                                    The default in v11 is corrected.

                                                                                                                                                                                                                                                    Deprecated

                                                                                                                                                                                                                                                  property scrollOffset

                                                                                                                                                                                                                                                  scrollOffset?: [number, number] | (() => [number, number]);
                                                                                                                                                                                                                                                  • Configures the scroll offset the router will use when scrolling to an element.

                                                                                                                                                                                                                                                    When given a tuple with x and y position value, the router uses that offset each time it scrolls. When given a function, the router invokes the function every time it restores scroll position.

                                                                                                                                                                                                                                                  property scrollPositionRestoration

                                                                                                                                                                                                                                                  scrollPositionRestoration?: 'disabled' | 'enabled' | 'top';
                                                                                                                                                                                                                                                  • Configures if the scroll position needs to be restored when navigating back.

                                                                                                                                                                                                                                                    * 'disabled'- (Default) Does nothing. Scroll position is maintained on navigation. * 'top'- Sets the scroll position to x = 0, y = 0 on all navigation. * 'enabled'- Restores the previous scroll position on backward navigation, else sets the position to the anchor if one is provided, or sets the scroll position to [0, 0] (forward navigation). This option will be the default in the future.

                                                                                                                                                                                                                                                    You can implement custom scroll restoration behavior by adapting the enabled behavior as in the following example.

                                                                                                                                                                                                                                                    class AppComponent {
                                                                                                                                                                                                                                                    movieData: any;
                                                                                                                                                                                                                                                    constructor(private router: Router, private viewportScroller: ViewportScroller,
                                                                                                                                                                                                                                                    changeDetectorRef: ChangeDetectorRef) {
                                                                                                                                                                                                                                                    router.events.pipe(filter((event: Event): event is Scroll => event instanceof Scroll)
                                                                                                                                                                                                                                                    ).subscribe(e => {
                                                                                                                                                                                                                                                    fetch('http://example.com/movies.json').then(response => {
                                                                                                                                                                                                                                                    this.movieData = response.json();
                                                                                                                                                                                                                                                    // update the template with the data before restoring scroll
                                                                                                                                                                                                                                                    changeDetectorRef.detectChanges();
                                                                                                                                                                                                                                                    if (e.position) {
                                                                                                                                                                                                                                                    viewportScroller.scrollToPosition(e.position);
                                                                                                                                                                                                                                                    }
                                                                                                                                                                                                                                                    });
                                                                                                                                                                                                                                                    });
                                                                                                                                                                                                                                                    }
                                                                                                                                                                                                                                                    }

                                                                                                                                                                                                                                                  property urlUpdateStrategy

                                                                                                                                                                                                                                                  urlUpdateStrategy?: 'deferred' | 'eager';
                                                                                                                                                                                                                                                  • Defines when the router updates the browser URL. By default ('deferred'), update after successful navigation. Set to 'eager' if prefer to update the URL at the beginning of navigation. Updating the URL early allows you to handle a failure of navigation by showing an error message with the URL that failed.

                                                                                                                                                                                                                                                  property useHash

                                                                                                                                                                                                                                                  useHash?: boolean;
                                                                                                                                                                                                                                                  • When true, enable the location strategy that uses the URL fragment instead of the history API.

                                                                                                                                                                                                                                                  interface IsActiveMatchOptions

                                                                                                                                                                                                                                                  interface IsActiveMatchOptions {}
                                                                                                                                                                                                                                                  • A set of options which specify how to determine if a UrlTree is active, given the UrlTree for the current router state.

                                                                                                                                                                                                                                                    See Also

                                                                                                                                                                                                                                                    • Router.isActive

                                                                                                                                                                                                                                                  property fragment

                                                                                                                                                                                                                                                  fragment: 'exact' | 'ignored';
                                                                                                                                                                                                                                                  • - 'exact': indicates that the UrlTree fragments must be equal. - 'ignored': the fragments will not be compared when determining if a UrlTree is active.

                                                                                                                                                                                                                                                  property matrixParams

                                                                                                                                                                                                                                                  matrixParams: 'exact' | 'subset' | 'ignored';
                                                                                                                                                                                                                                                  • Defines the strategy for comparing the matrix parameters of two UrlTrees.

                                                                                                                                                                                                                                                    The matrix parameter matching is dependent on the strategy for matching the segments. That is, if the paths option is set to 'subset', only the matrix parameters of the matching segments will be compared.

                                                                                                                                                                                                                                                    - 'exact': Requires that matching segments also have exact matrix parameter matches. - 'subset': The matching segments in the router's active UrlTree may contain extra matrix parameters, but those that exist in the UrlTree in question must match. - 'ignored': When comparing UrlTrees, matrix params will be ignored.

                                                                                                                                                                                                                                                  property paths

                                                                                                                                                                                                                                                  paths: 'exact' | 'subset';
                                                                                                                                                                                                                                                  • Defines the strategy for comparing the UrlSegments of the UrlTrees.

                                                                                                                                                                                                                                                    - 'exact': all segments in each UrlTree must match. - 'subset': a UrlTree will be determined to be active if it is a subtree of the active route. That is, the active route may contain extra segments, but must at least have all the segments of the UrlTree in question.

                                                                                                                                                                                                                                                  property queryParams

                                                                                                                                                                                                                                                  queryParams: 'exact' | 'subset' | 'ignored';
                                                                                                                                                                                                                                                  • Defines the strategy for comparing the query parameters of two UrlTrees.

                                                                                                                                                                                                                                                    - 'exact': the query parameters must match exactly. - 'subset': the active UrlTree may contain extra parameters, but must match the key and value of any that exist in the UrlTree in question. - 'ignored': When comparing UrlTrees, query params will be ignored.

                                                                                                                                                                                                                                                  interface Navigation {}
                                                                                                                                                                                                                                                  • Information about a navigation operation. Retrieve the most recent navigation object with the [Router.getCurrentNavigation() method](api/router/Router#getcurrentnavigation) .

                                                                                                                                                                                                                                                    * *id* : The unique identifier of the current navigation. * *initialUrl* : The target URL passed into the Router#navigateByUrl() call before navigation. This is the value before the router has parsed or applied redirects to it. * *extractedUrl* : The initial target URL after being parsed with UrlSerializer.extract(). * *finalUrl* : The extracted URL after redirects have been applied. This URL may not be available immediately, therefore this property can be undefined. It is guaranteed to be set after the RoutesRecognized event fires. * *trigger* : Identifies how this navigation was triggered. -- 'imperative'--Triggered by router.navigateByUrl or router.navigate. -- 'popstate'--Triggered by a popstate event. -- 'hashchange'--Triggered by a hashchange event. * *extras* : A NavigationExtras options object that controlled the strategy used for this navigation. * *previousNavigation* : The previously successful Navigation object. Only one previous navigation is available, therefore this previous Navigation object has a null value for its own previousNavigation.

                                                                                                                                                                                                                                                  extractedUrl: UrlTree;
                                                                                                                                                                                                                                                  • The initial target URL after being parsed with UrlSerializer.extract().

                                                                                                                                                                                                                                                  extras: NavigationExtras;
                                                                                                                                                                                                                                                  • Options that controlled the strategy used for this navigation. See NavigationExtras.

                                                                                                                                                                                                                                                  finalUrl?: UrlTree;
                                                                                                                                                                                                                                                  • The extracted URL after redirects have been applied. This URL may not be available immediately, therefore this property can be undefined. It is guaranteed to be set after the RoutesRecognized event fires.

                                                                                                                                                                                                                                                  id: number;
                                                                                                                                                                                                                                                  • The unique identifier of the current navigation.

                                                                                                                                                                                                                                                  initialUrl: UrlTree;
                                                                                                                                                                                                                                                  • The target URL passed into the Router#navigateByUrl() call before navigation. This is the value before the router has parsed or applied redirects to it.

                                                                                                                                                                                                                                                  previousNavigation: Navigation | null;
                                                                                                                                                                                                                                                  • The previously successful Navigation object. Only one previous navigation is available, therefore this previous Navigation object has a null value for its own previousNavigation.

                                                                                                                                                                                                                                                  trigger: 'imperative' | 'popstate' | 'hashchange';
                                                                                                                                                                                                                                                  • Identifies how this navigation was triggered.

                                                                                                                                                                                                                                                    * 'imperative'--Triggered by router.navigateByUrl or router.navigate. * 'popstate'--Triggered by a popstate event. * 'hashchange'--Triggered by a hashchange event.

                                                                                                                                                                                                                                                  interface NavigationBehaviorOptions {}
                                                                                                                                                                                                                                                  • Options that modify the Router navigation strategy. Supply an object containing any of these properties to a Router navigation function to control how the navigation should be handled.

                                                                                                                                                                                                                                                    See Also

                                                                                                                                                                                                                                                    • [Router.navigate() method](api/router/Router#navigate)

                                                                                                                                                                                                                                                    • [Router.navigateByUrl() method](api/router/Router#navigatebyurl)

                                                                                                                                                                                                                                                    • [Routing and Navigation guide](guide/router)

                                                                                                                                                                                                                                                  replaceUrl?: boolean;
                                                                                                                                                                                                                                                  • When true, navigates while replacing the current state in history.

                                                                                                                                                                                                                                                    // Navigate to /view
                                                                                                                                                                                                                                                    this.router.navigate(['/view'], { replaceUrl: true });
                                                                                                                                                                                                                                                  skipLocationChange?: boolean;
                                                                                                                                                                                                                                                  • When true, navigates without pushing a new state into history.

                                                                                                                                                                                                                                                    // Navigate silently to /view
                                                                                                                                                                                                                                                    this.router.navigate(['/view'], { skipLocationChange: true });
                                                                                                                                                                                                                                                  state?: {
                                                                                                                                                                                                                                                  [k: string]: any;
                                                                                                                                                                                                                                                  };
                                                                                                                                                                                                                                                  • Developer-defined state that can be passed to any navigation. Access this value through the Navigation.extras object returned from the [Router.getCurrentNavigation() method](api/router/Router#getcurrentnavigation) while a navigation is executing.

                                                                                                                                                                                                                                                    After a navigation completes, the router writes an object containing this value together with a navigationId to history.state. The value is written when location.go() or location.replaceState() is called before activating this route.

                                                                                                                                                                                                                                                    Note that history.state does not pass an object equality test because the router adds the navigationId on each navigation.

                                                                                                                                                                                                                                                  interface NavigationExtras extends UrlCreationOptions, NavigationBehaviorOptions {}
                                                                                                                                                                                                                                                  • Options that modify the Router navigation strategy. Supply an object containing any of these properties to a Router navigation function to control how the target URL should be constructed or interpreted.

                                                                                                                                                                                                                                                    See Also

                                                                                                                                                                                                                                                    • [Router.navigate() method](api/router/Router#navigate)

                                                                                                                                                                                                                                                    • [Router.navigateByUrl() method](api/router/Router#navigatebyurl)

                                                                                                                                                                                                                                                    • [Router.createUrlTree() method](api/router/Router#createurltree)

                                                                                                                                                                                                                                                    • [Routing and Navigation guide](guide/router)

                                                                                                                                                                                                                                                    • UrlCreationOptions

                                                                                                                                                                                                                                                    • NavigationBehaviorOptions

                                                                                                                                                                                                                                                  interface ParamMap

                                                                                                                                                                                                                                                  interface ParamMap {}
                                                                                                                                                                                                                                                  • A map that provides access to the required and optional parameters specific to a route. The map supports retrieving a single value with get() or multiple values with getAll().

                                                                                                                                                                                                                                                    See Also

                                                                                                                                                                                                                                                    • [URLSearchParams](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams)

                                                                                                                                                                                                                                                  property keys

                                                                                                                                                                                                                                                  readonly keys: string[];
                                                                                                                                                                                                                                                  • Names of the parameters in the map.

                                                                                                                                                                                                                                                  method get

                                                                                                                                                                                                                                                  get: (name: string) => string | null;
                                                                                                                                                                                                                                                  • Retrieves a single value for a parameter.

                                                                                                                                                                                                                                                    Parameter name

                                                                                                                                                                                                                                                    The parameter name. The parameter's single value, or the first value if the parameter has multiple values, or null when there is no such parameter.

                                                                                                                                                                                                                                                  method getAll

                                                                                                                                                                                                                                                  getAll: (name: string) => string[];
                                                                                                                                                                                                                                                  • Retrieves multiple values for a parameter.

                                                                                                                                                                                                                                                    Parameter name

                                                                                                                                                                                                                                                    The parameter name. An array containing one or more values, or an empty array if there is no such parameter.

                                                                                                                                                                                                                                                  method has

                                                                                                                                                                                                                                                  has: (name: string) => boolean;
                                                                                                                                                                                                                                                  • Reports whether the map contains a given parameter.

                                                                                                                                                                                                                                                    Parameter name

                                                                                                                                                                                                                                                    The parameter name.

                                                                                                                                                                                                                                                    Returns

                                                                                                                                                                                                                                                    True if the map contains the given parameter, false otherwise.

                                                                                                                                                                                                                                                  interface Resolve

                                                                                                                                                                                                                                                  interface Resolve<T> {}
                                                                                                                                                                                                                                                  • Interface that classes can implement to be a data provider. A data provider class can be used with the router to resolve data during navigation. The interface defines a resolve() method that is invoked right after the ResolveStart router event. The router waits for the data to be resolved before the route is finally activated.

                                                                                                                                                                                                                                                    The following example implements a resolve() method that retrieves the data needed to activate the requested route.

                                                                                                                                                                                                                                                    @Injectable({ providedIn: 'root' })
                                                                                                                                                                                                                                                    export class HeroResolver implements Resolve<Hero> {
                                                                                                                                                                                                                                                    constructor(private service: HeroService) {}
                                                                                                                                                                                                                                                    resolve(
                                                                                                                                                                                                                                                    route: ActivatedRouteSnapshot,
                                                                                                                                                                                                                                                    state: RouterStateSnapshot
                                                                                                                                                                                                                                                    ): Observable<Hero>|Promise<Hero>|Hero {
                                                                                                                                                                                                                                                    return this.service.getHero(route.paramMap.get('id'));
                                                                                                                                                                                                                                                    }
                                                                                                                                                                                                                                                    }

                                                                                                                                                                                                                                                    Here, the defined resolve() function is provided as part of the Route object in the router configuration:

                                                                                                                                                                                                                                                    @NgModule({
                                                                                                                                                                                                                                                    imports: [
                                                                                                                                                                                                                                                    RouterModule.forRoot([
                                                                                                                                                                                                                                                    {
                                                                                                                                                                                                                                                    path: 'detail/:id',
                                                                                                                                                                                                                                                    component: HeroDetailComponent,
                                                                                                                                                                                                                                                    resolve: {
                                                                                                                                                                                                                                                    hero: HeroResolver
                                                                                                                                                                                                                                                    }
                                                                                                                                                                                                                                                    }
                                                                                                                                                                                                                                                    ])
                                                                                                                                                                                                                                                    ],
                                                                                                                                                                                                                                                    exports: [RouterModule]
                                                                                                                                                                                                                                                    })
                                                                                                                                                                                                                                                    export class AppRoutingModule {}

                                                                                                                                                                                                                                                    You can alternatively provide an in-line function with the resolve() signature:

                                                                                                                                                                                                                                                    export const myHero: Hero = {
                                                                                                                                                                                                                                                    // ...
                                                                                                                                                                                                                                                    }
                                                                                                                                                                                                                                                    @NgModule({
                                                                                                                                                                                                                                                    imports: [
                                                                                                                                                                                                                                                    RouterModule.forRoot([
                                                                                                                                                                                                                                                    {
                                                                                                                                                                                                                                                    path: 'detail/:id',
                                                                                                                                                                                                                                                    component: HeroComponent,
                                                                                                                                                                                                                                                    resolve: {
                                                                                                                                                                                                                                                    hero: 'heroResolver'
                                                                                                                                                                                                                                                    }
                                                                                                                                                                                                                                                    }
                                                                                                                                                                                                                                                    ])
                                                                                                                                                                                                                                                    ],
                                                                                                                                                                                                                                                    providers: [
                                                                                                                                                                                                                                                    {
                                                                                                                                                                                                                                                    provide: 'heroResolver',
                                                                                                                                                                                                                                                    useValue: (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => myHero
                                                                                                                                                                                                                                                    }
                                                                                                                                                                                                                                                    ]
                                                                                                                                                                                                                                                    })
                                                                                                                                                                                                                                                    export class AppModule {}

                                                                                                                                                                                                                                                    And you can access to your resolved data from HeroComponent:

                                                                                                                                                                                                                                                    @Component({
                                                                                                                                                                                                                                                    selector: "app-hero",
                                                                                                                                                                                                                                                    templateUrl: "hero.component.html",
                                                                                                                                                                                                                                                    })
                                                                                                                                                                                                                                                    export class HeroComponent {
                                                                                                                                                                                                                                                    constructor(private activatedRoute: ActivatedRoute) {}
                                                                                                                                                                                                                                                    ngOnInit() {
                                                                                                                                                                                                                                                    this.activatedRoute.data.subscribe(({ hero }) => {
                                                                                                                                                                                                                                                    // do something with your resolved data ...
                                                                                                                                                                                                                                                    })
                                                                                                                                                                                                                                                    }
                                                                                                                                                                                                                                                    }

                                                                                                                                                                                                                                                    When both guard and resolvers are specified, the resolvers are not executed until all guards have run and succeeded. For example, consider the following route configuration:

                                                                                                                                                                                                                                                    {
                                                                                                                                                                                                                                                    path: 'base'
                                                                                                                                                                                                                                                    canActivate: [BaseGuard],
                                                                                                                                                                                                                                                    resolve: {data: BaseDataResolver}
                                                                                                                                                                                                                                                    children: [
                                                                                                                                                                                                                                                    {
                                                                                                                                                                                                                                                    path: 'child',
                                                                                                                                                                                                                                                    guards: [ChildGuard],
                                                                                                                                                                                                                                                    component: ChildComponent,
                                                                                                                                                                                                                                                    resolve: {childData: ChildDataResolver}
                                                                                                                                                                                                                                                    }
                                                                                                                                                                                                                                                    ]
                                                                                                                                                                                                                                                    }

                                                                                                                                                                                                                                                    The order of execution is: BaseGuard, ChildGuard, BaseDataResolver, ChildDataResolver.

                                                                                                                                                                                                                                                  method resolve

                                                                                                                                                                                                                                                  resolve: (
                                                                                                                                                                                                                                                  route: ActivatedRouteSnapshot,
                                                                                                                                                                                                                                                  state: RouterStateSnapshot
                                                                                                                                                                                                                                                  ) => Observable<T> | Promise<T> | T;

                                                                                                                                                                                                                                                    interface Route

                                                                                                                                                                                                                                                    interface Route {}
                                                                                                                                                                                                                                                    • A configuration object that defines a single route. A set of routes are collected in a Routes array to define a Router configuration. The router attempts to match segments of a given URL against each route, using the configuration options defined in this object.

                                                                                                                                                                                                                                                      Supports static, parameterized, redirect, and wildcard routes, as well as custom route data and resolve methods.

                                                                                                                                                                                                                                                      For detailed usage information, see the [Routing Guide](guide/router).

                                                                                                                                                                                                                                                      ### Simple Configuration

                                                                                                                                                                                                                                                      The following route specifies that when navigating to, for example, /team/11/user/bob, the router creates the 'Team' component with the 'User' child component in it.

                                                                                                                                                                                                                                                      [{
                                                                                                                                                                                                                                                      path: 'team/:id',
                                                                                                                                                                                                                                                      component: Team,
                                                                                                                                                                                                                                                      children: [{
                                                                                                                                                                                                                                                      path: 'user/:name',
                                                                                                                                                                                                                                                      component: User
                                                                                                                                                                                                                                                      }]
                                                                                                                                                                                                                                                      }]

                                                                                                                                                                                                                                                      ### Multiple Outlets

                                                                                                                                                                                                                                                      The following route creates sibling components with multiple outlets. When navigating to /team/11(aux:chat/jim), the router creates the 'Team' component next to the 'Chat' component. The 'Chat' component is placed into the 'aux' outlet.

                                                                                                                                                                                                                                                      [{
                                                                                                                                                                                                                                                      path: 'team/:id',
                                                                                                                                                                                                                                                      component: Team
                                                                                                                                                                                                                                                      }, {
                                                                                                                                                                                                                                                      path: 'chat/:user',
                                                                                                                                                                                                                                                      component: Chat
                                                                                                                                                                                                                                                      outlet: 'aux'
                                                                                                                                                                                                                                                      }]

                                                                                                                                                                                                                                                      ### Wild Cards

                                                                                                                                                                                                                                                      The following route uses wild-card notation to specify a component that is always instantiated regardless of where you navigate to.

                                                                                                                                                                                                                                                      [{
                                                                                                                                                                                                                                                      path: '**',
                                                                                                                                                                                                                                                      component: WildcardComponent
                                                                                                                                                                                                                                                      }]

                                                                                                                                                                                                                                                      ### Redirects

                                                                                                                                                                                                                                                      The following route uses the redirectTo property to ignore a segment of a given URL when looking for a child path.

                                                                                                                                                                                                                                                      When navigating to '/team/11/legacy/user/jim', the router changes the URL segment '/team/11/legacy/user/jim' to '/team/11/user/jim', and then instantiates the Team component with the User child component in it.

                                                                                                                                                                                                                                                      [{
                                                                                                                                                                                                                                                      path: 'team/:id',
                                                                                                                                                                                                                                                      component: Team,
                                                                                                                                                                                                                                                      children: [{
                                                                                                                                                                                                                                                      path: 'legacy/user/:name',
                                                                                                                                                                                                                                                      redirectTo: 'user/:name'
                                                                                                                                                                                                                                                      }, {
                                                                                                                                                                                                                                                      path: 'user/:name',
                                                                                                                                                                                                                                                      component: User
                                                                                                                                                                                                                                                      }]
                                                                                                                                                                                                                                                      }]

                                                                                                                                                                                                                                                      The redirect path can be relative, as shown in this example, or absolute. If we change the redirectTo value in the example to the absolute URL segment '/user/:name', the result URL is also absolute, '/user/jim'.

                                                                                                                                                                                                                                                      ### Empty Path

                                                                                                                                                                                                                                                      Empty-path route configurations can be used to instantiate components that do not 'consume' any URL segments.

                                                                                                                                                                                                                                                      In the following configuration, when navigating to /team/11, the router instantiates the 'AllUsers' component.

                                                                                                                                                                                                                                                      [{
                                                                                                                                                                                                                                                      path: 'team/:id',
                                                                                                                                                                                                                                                      component: Team,
                                                                                                                                                                                                                                                      children: [{
                                                                                                                                                                                                                                                      path: '',
                                                                                                                                                                                                                                                      component: AllUsers
                                                                                                                                                                                                                                                      }, {
                                                                                                                                                                                                                                                      path: 'user/:name',
                                                                                                                                                                                                                                                      component: User
                                                                                                                                                                                                                                                      }]
                                                                                                                                                                                                                                                      }]

                                                                                                                                                                                                                                                      Empty-path routes can have children. In the following example, when navigating to /team/11/user/jim, the router instantiates the wrapper component with the user component in it.

                                                                                                                                                                                                                                                      Note that an empty path route inherits its parent's parameters and data.

                                                                                                                                                                                                                                                      [{
                                                                                                                                                                                                                                                      path: 'team/:id',
                                                                                                                                                                                                                                                      component: Team,
                                                                                                                                                                                                                                                      children: [{
                                                                                                                                                                                                                                                      path: '',
                                                                                                                                                                                                                                                      component: WrapperCmp,
                                                                                                                                                                                                                                                      children: [{
                                                                                                                                                                                                                                                      path: 'user/:name',
                                                                                                                                                                                                                                                      component: User
                                                                                                                                                                                                                                                      }]
                                                                                                                                                                                                                                                      }]
                                                                                                                                                                                                                                                      }]

                                                                                                                                                                                                                                                      ### Matching Strategy

                                                                                                                                                                                                                                                      The default path-match strategy is 'prefix', which means that the router checks URL elements from the left to see if the URL matches a specified path. For example, '/team/11/user' matches 'team/:id'.

                                                                                                                                                                                                                                                      [{
                                                                                                                                                                                                                                                      path: '',
                                                                                                                                                                                                                                                      pathMatch: 'prefix', //default
                                                                                                                                                                                                                                                      redirectTo: 'main'
                                                                                                                                                                                                                                                      }, {
                                                                                                                                                                                                                                                      path: 'main',
                                                                                                                                                                                                                                                      component: Main
                                                                                                                                                                                                                                                      }]

                                                                                                                                                                                                                                                      You can specify the path-match strategy 'full' to make sure that the path covers the whole unconsumed URL. It is important to do this when redirecting empty-path routes. Otherwise, because an empty path is a prefix of any URL, the router would apply the redirect even when navigating to the redirect destination, creating an endless loop.

                                                                                                                                                                                                                                                      In the following example, supplying the 'full' pathMatch strategy ensures that the router applies the redirect if and only if navigating to '/'.

                                                                                                                                                                                                                                                      [{
                                                                                                                                                                                                                                                      path: '',
                                                                                                                                                                                                                                                      pathMatch: 'full',
                                                                                                                                                                                                                                                      redirectTo: 'main'
                                                                                                                                                                                                                                                      }, {
                                                                                                                                                                                                                                                      path: 'main',
                                                                                                                                                                                                                                                      component: Main
                                                                                                                                                                                                                                                      }]

                                                                                                                                                                                                                                                      ### Componentless Routes

                                                                                                                                                                                                                                                      You can share parameters between sibling components. For example, suppose that two sibling components should go next to each other, and both of them require an ID parameter. You can accomplish this using a route that does not specify a component at the top level.

                                                                                                                                                                                                                                                      In the following example, 'MainChild' and 'AuxChild' are siblings. When navigating to 'parent/10/(a//aux:b)', the route instantiates the main child and aux child components next to each other. For this to work, the application component must have the primary and aux outlets defined.

                                                                                                                                                                                                                                                      [{
                                                                                                                                                                                                                                                      path: 'parent/:id',
                                                                                                                                                                                                                                                      children: [
                                                                                                                                                                                                                                                      { path: 'a', component: MainChild },
                                                                                                                                                                                                                                                      { path: 'b', component: AuxChild, outlet: 'aux' }
                                                                                                                                                                                                                                                      ]
                                                                                                                                                                                                                                                      }]

                                                                                                                                                                                                                                                      The router merges the parameters, data, and resolve of the componentless parent into the parameters, data, and resolve of the children.

                                                                                                                                                                                                                                                      This is especially useful when child components are defined with an empty path string, as in the following example. With this configuration, navigating to '/parent/10' creates the main child and aux components.

                                                                                                                                                                                                                                                      [{
                                                                                                                                                                                                                                                      path: 'parent/:id',
                                                                                                                                                                                                                                                      children: [
                                                                                                                                                                                                                                                      { path: '', component: MainChild },
                                                                                                                                                                                                                                                      { path: '', component: AuxChild, outlet: 'aux' }
                                                                                                                                                                                                                                                      ]
                                                                                                                                                                                                                                                      }]

                                                                                                                                                                                                                                                      ### Lazy Loading

                                                                                                                                                                                                                                                      Lazy loading speeds up application load time by splitting the application into multiple bundles and loading them on demand. To use lazy loading, provide the loadChildren property in the Route object, instead of the children property.

                                                                                                                                                                                                                                                      Given the following example route, the router will lazy load the associated module on demand using the browser native import system.

                                                                                                                                                                                                                                                      [{
                                                                                                                                                                                                                                                      path: 'lazy',
                                                                                                                                                                                                                                                      loadChildren: () => import('./lazy-route/lazy.module').then(mod => mod.LazyModule),
                                                                                                                                                                                                                                                      }];

                                                                                                                                                                                                                                                    property canActivate

                                                                                                                                                                                                                                                    canActivate?: any[];
                                                                                                                                                                                                                                                    • An array of dependency-injection tokens used to look up CanActivate() handlers, in order to determine if the current user is allowed to activate the component. By default, any user can activate.

                                                                                                                                                                                                                                                    property canActivateChild

                                                                                                                                                                                                                                                    canActivateChild?: any[];
                                                                                                                                                                                                                                                    • An array of DI tokens used to look up CanActivateChild() handlers, in order to determine if the current user is allowed to activate a child of the component. By default, any user can activate a child.

                                                                                                                                                                                                                                                    property canDeactivate

                                                                                                                                                                                                                                                    canDeactivate?: any[];
                                                                                                                                                                                                                                                    • An array of DI tokens used to look up CanDeactivate() handlers, in order to determine if the current user is allowed to deactivate the component. By default, any user can deactivate.

                                                                                                                                                                                                                                                    property canLoad

                                                                                                                                                                                                                                                    canLoad?: any[];
                                                                                                                                                                                                                                                    • An array of DI tokens used to look up CanLoad() handlers, in order to determine if the current user is allowed to load the component. By default, any user can load.

                                                                                                                                                                                                                                                    property children

                                                                                                                                                                                                                                                    children?: Routes;
                                                                                                                                                                                                                                                    • An array of child Route objects that specifies a nested route configuration.

                                                                                                                                                                                                                                                    property component

                                                                                                                                                                                                                                                    component?: Type<any>;
                                                                                                                                                                                                                                                    • The component to instantiate when the path matches. Can be empty if child routes specify components.

                                                                                                                                                                                                                                                    property data

                                                                                                                                                                                                                                                    data?: Data;
                                                                                                                                                                                                                                                    • Additional developer-defined data provided to the component via ActivatedRoute. By default, no additional data is passed.

                                                                                                                                                                                                                                                    property loadChildren

                                                                                                                                                                                                                                                    loadChildren?: LoadChildren;
                                                                                                                                                                                                                                                    • An object specifying lazy-loaded child routes.

                                                                                                                                                                                                                                                    property loadComponent

                                                                                                                                                                                                                                                    loadComponent?: () =>
                                                                                                                                                                                                                                                    | Type<unknown>
                                                                                                                                                                                                                                                    | Observable<Type<unknown>>
                                                                                                                                                                                                                                                    | Promise<Type<unknown>>;
                                                                                                                                                                                                                                                    • An object specifying a lazy-loaded component.

                                                                                                                                                                                                                                                    property matcher

                                                                                                                                                                                                                                                    matcher?: UrlMatcher;
                                                                                                                                                                                                                                                    • A custom URL-matching function. Cannot be used together with path.

                                                                                                                                                                                                                                                    property outlet

                                                                                                                                                                                                                                                    outlet?: string;
                                                                                                                                                                                                                                                    • Name of a RouterOutlet object where the component can be placed when the path matches.

                                                                                                                                                                                                                                                    property path

                                                                                                                                                                                                                                                    path?: string;
                                                                                                                                                                                                                                                    • The path to match against. Cannot be used together with a custom matcher function. A URL string that uses router matching notation. Can be a wild card (**) that matches any URL (see Usage Notes below). Default is "/" (the root path).

                                                                                                                                                                                                                                                    property pathMatch

                                                                                                                                                                                                                                                    pathMatch?: 'prefix' | 'full';
                                                                                                                                                                                                                                                    • The path-matching strategy, one of 'prefix' or 'full'. Default is 'prefix'.

                                                                                                                                                                                                                                                      By default, the router checks URL elements from the left to see if the URL matches a given path and stops when there is a config match. Importantly there must still be a config match for each segment of the URL. For example, '/team/11/user' matches the prefix 'team/:id' if one of the route's children matches the segment 'user'. That is, the URL '/team/11/user' matches the config {path: 'team/:id', children: [{path: ':user', component: User}]} but does not match when there are no children as in {path: 'team/:id', component: Team}.

                                                                                                                                                                                                                                                      The path-match strategy 'full' matches against the entire URL. It is important to do this when redirecting empty-path routes. Otherwise, because an empty path is a prefix of any URL, the router would apply the redirect even when navigating to the redirect destination, creating an endless loop.

                                                                                                                                                                                                                                                    property providers

                                                                                                                                                                                                                                                    providers?: Array<Provider | ImportedNgModuleProviders>;
                                                                                                                                                                                                                                                    • A Provider array to use for this Route and its children.

                                                                                                                                                                                                                                                      The Router will create a new EnvironmentInjector for this Route and use it for this Route and its children. If this route also has a loadChildren function which returns an NgModuleRef, this injector will be used as the parent of the lazy loaded module.

                                                                                                                                                                                                                                                    property redirectTo

                                                                                                                                                                                                                                                    redirectTo?: string;
                                                                                                                                                                                                                                                    • A URL to redirect to when the path matches.

                                                                                                                                                                                                                                                      Absolute if the URL begins with a slash (/), otherwise relative to the path URL. Note that no further redirects are evaluated after an absolute redirect.

                                                                                                                                                                                                                                                      When not present, router does not redirect.

                                                                                                                                                                                                                                                    property resolve

                                                                                                                                                                                                                                                    resolve?: ResolveData;
                                                                                                                                                                                                                                                    • A map of DI tokens used to look up data resolvers. See Resolve.

                                                                                                                                                                                                                                                    property runGuardsAndResolvers

                                                                                                                                                                                                                                                    runGuardsAndResolvers?: RunGuardsAndResolvers;
                                                                                                                                                                                                                                                    • Defines when guards and resolvers will be run. One of - paramsOrQueryParamsChange : Run when query parameters change. - always : Run on every execution. By default, guards and resolvers run only when the matrix parameters of the route change.

                                                                                                                                                                                                                                                    property title

                                                                                                                                                                                                                                                    title?: string | Type<Resolve<string>>;
                                                                                                                                                                                                                                                    • Used to define a page title for the route. This can be a static string or an Injectable that implements Resolve.

                                                                                                                                                                                                                                                      See Also

                                                                                                                                                                                                                                                      • PageTitleStrategy

                                                                                                                                                                                                                                                    interface RouterOutletContract

                                                                                                                                                                                                                                                    interface RouterOutletContract {}
                                                                                                                                                                                                                                                    • An interface that defines the contract for developing a component outlet for the Router.

                                                                                                                                                                                                                                                      An outlet acts as a placeholder that Angular dynamically fills based on the current router state.

                                                                                                                                                                                                                                                      A router outlet should register itself with the Router via ChildrenOutletContexts#onChildOutletCreated and unregister with ChildrenOutletContexts#onChildOutletDestroyed. When the Router identifies a matched Route, it looks for a registered outlet in the ChildrenOutletContexts and activates it.

                                                                                                                                                                                                                                                      See Also

                                                                                                                                                                                                                                                      • ChildrenOutletContexts

                                                                                                                                                                                                                                                    property activatedRoute

                                                                                                                                                                                                                                                    activatedRoute: ActivatedRoute | null;
                                                                                                                                                                                                                                                    • The ActivatedRoute for the outlet or null if the outlet is not activated.

                                                                                                                                                                                                                                                    property activatedRouteData

                                                                                                                                                                                                                                                    activatedRouteData: Data;
                                                                                                                                                                                                                                                    • The Data of the ActivatedRoute snapshot.

                                                                                                                                                                                                                                                    property activateEvents

                                                                                                                                                                                                                                                    activateEvents?: EventEmitter<unknown>;
                                                                                                                                                                                                                                                    • Emits an activate event when a new component is instantiated

                                                                                                                                                                                                                                                    property attachEvents

                                                                                                                                                                                                                                                    attachEvents?: EventEmitter<unknown>;
                                                                                                                                                                                                                                                    • Emits an attached component instance when the RouteReuseStrategy instructs to re-attach a previously detached subtree.

                                                                                                                                                                                                                                                    property component

                                                                                                                                                                                                                                                    component: Object | null;
                                                                                                                                                                                                                                                    • The instance of the activated component or null if the outlet is not activated.

                                                                                                                                                                                                                                                    property deactivateEvents

                                                                                                                                                                                                                                                    deactivateEvents?: EventEmitter<unknown>;
                                                                                                                                                                                                                                                    • Emits a deactivate event when a component is destroyed.

                                                                                                                                                                                                                                                    property detachEvents

                                                                                                                                                                                                                                                    detachEvents?: EventEmitter<unknown>;
                                                                                                                                                                                                                                                    • Emits a detached component instance when the RouteReuseStrategy instructs to detach the subtree.

                                                                                                                                                                                                                                                    property isActivated

                                                                                                                                                                                                                                                    isActivated: boolean;
                                                                                                                                                                                                                                                    • Whether the given outlet is activated.

                                                                                                                                                                                                                                                      An outlet is considered "activated" if it has an active component.

                                                                                                                                                                                                                                                    method activateWith

                                                                                                                                                                                                                                                    activateWith: {
                                                                                                                                                                                                                                                    (
                                                                                                                                                                                                                                                    activatedRoute: ActivatedRoute,
                                                                                                                                                                                                                                                    environmnetInjector: EnvironmentInjector | null
                                                                                                                                                                                                                                                    ): void;
                                                                                                                                                                                                                                                    (activatedRoute: ActivatedRoute, resolver: any): void;
                                                                                                                                                                                                                                                    };
                                                                                                                                                                                                                                                    • Called by the Router when the outlet should activate (create a component).

                                                                                                                                                                                                                                                    • Called by the Router when the outlet should activate (create a component).

                                                                                                                                                                                                                                                      Deprecated

                                                                                                                                                                                                                                                      Passing a resolver to retrieve a component factory is not required and is deprecated since v14.

                                                                                                                                                                                                                                                    method attach

                                                                                                                                                                                                                                                    attach: (ref: ComponentRef<unknown>, activatedRoute: ActivatedRoute) => void;
                                                                                                                                                                                                                                                    • Called when the RouteReuseStrategy instructs to re-attach a previously detached subtree.

                                                                                                                                                                                                                                                    method deactivate

                                                                                                                                                                                                                                                    deactivate: () => void;
                                                                                                                                                                                                                                                    • A request to destroy the currently activated component.

                                                                                                                                                                                                                                                      When a RouteReuseStrategy indicates that an ActivatedRoute should be removed but stored for later re-use rather than destroyed, the Router will call detach instead.

                                                                                                                                                                                                                                                    method detach

                                                                                                                                                                                                                                                    detach: () => ComponentRef<unknown>;
                                                                                                                                                                                                                                                    • Called when the RouteReuseStrategy instructs to detach the subtree.

                                                                                                                                                                                                                                                      This is similar to deactivate, but the activated component should _not_ be destroyed. Instead, it is returned so that it can be reattached later via the attach method.

                                                                                                                                                                                                                                                    interface UrlCreationOptions

                                                                                                                                                                                                                                                    interface UrlCreationOptions {}
                                                                                                                                                                                                                                                    • Options that modify the Router URL. Supply an object containing any of these properties to a Router navigation function to control how the target URL should be constructed.

                                                                                                                                                                                                                                                      See Also

                                                                                                                                                                                                                                                      • [Router.navigate() method](api/router/Router#navigate)

                                                                                                                                                                                                                                                      • [Router.createUrlTree() method](api/router/Router#createurltree)

                                                                                                                                                                                                                                                      • [Routing and Navigation guide](guide/router)

                                                                                                                                                                                                                                                    property fragment

                                                                                                                                                                                                                                                    fragment?: string;
                                                                                                                                                                                                                                                    • Sets the hash fragment for the URL.

                                                                                                                                                                                                                                                      // Navigate to /results#top
                                                                                                                                                                                                                                                      this.router.navigate(['/results'], { fragment: 'top' });

                                                                                                                                                                                                                                                    property preserveFragment

                                                                                                                                                                                                                                                    preserveFragment?: boolean;
                                                                                                                                                                                                                                                    • When true, preserves the URL fragment for the next navigation

                                                                                                                                                                                                                                                      // Preserve fragment from /results#top to /view#top
                                                                                                                                                                                                                                                      this.router.navigate(['/view'], { preserveFragment: true });

                                                                                                                                                                                                                                                    property queryParams

                                                                                                                                                                                                                                                    queryParams?: Params | null;
                                                                                                                                                                                                                                                    • Sets query parameters to the URL.

                                                                                                                                                                                                                                                      // Navigate to /results?page=1
                                                                                                                                                                                                                                                      this.router.navigate(['/results'], { queryParams: { page: 1 } });

                                                                                                                                                                                                                                                    property queryParamsHandling

                                                                                                                                                                                                                                                    queryParamsHandling?: QueryParamsHandling | null;
                                                                                                                                                                                                                                                    • How to handle query parameters in the router link for the next navigation. One of: * preserve : Preserve current parameters. * merge : Merge new with current parameters.

                                                                                                                                                                                                                                                      The "preserve" option discards any new query params:

                                                                                                                                                                                                                                                      // from /view1?page=1 to/view2?page=1
                                                                                                                                                                                                                                                      this.router.navigate(['/view2'], { queryParams: { page: 2 }, queryParamsHandling: "preserve"
                                                                                                                                                                                                                                                      });

                                                                                                                                                                                                                                                      The "merge" option appends new query params to the params from the current URL:

                                                                                                                                                                                                                                                      // from /view1?page=1 to/view2?page=1&otherKey=2
                                                                                                                                                                                                                                                      this.router.navigate(['/view2'], { queryParams: { otherKey: 2 }, queryParamsHandling: "merge"
                                                                                                                                                                                                                                                      });

                                                                                                                                                                                                                                                      In case of a key collision between current parameters and those in the queryParams object, the new value is used.

                                                                                                                                                                                                                                                    property relativeTo

                                                                                                                                                                                                                                                    relativeTo?: ActivatedRoute | null;
                                                                                                                                                                                                                                                    • Specifies a root URI to use for relative navigation.

                                                                                                                                                                                                                                                      For example, consider the following route configuration where the parent route has two children.

                                                                                                                                                                                                                                                      [{
                                                                                                                                                                                                                                                      path: 'parent',
                                                                                                                                                                                                                                                      component: ParentComponent,
                                                                                                                                                                                                                                                      children: [{
                                                                                                                                                                                                                                                      path: 'list',
                                                                                                                                                                                                                                                      component: ListComponent
                                                                                                                                                                                                                                                      },{
                                                                                                                                                                                                                                                      path: 'child',
                                                                                                                                                                                                                                                      component: ChildComponent
                                                                                                                                                                                                                                                      }]
                                                                                                                                                                                                                                                      }]

                                                                                                                                                                                                                                                      The following go() function navigates to the list route by interpreting the destination URI as relative to the activated child route

                                                                                                                                                                                                                                                      @Component({...})
                                                                                                                                                                                                                                                      class ChildComponent {
                                                                                                                                                                                                                                                      constructor(private router: Router, private route: ActivatedRoute) {}
                                                                                                                                                                                                                                                      go() {
                                                                                                                                                                                                                                                      this.router.navigate(['../list'], { relativeTo: this.route });
                                                                                                                                                                                                                                                      }
                                                                                                                                                                                                                                                      }

                                                                                                                                                                                                                                                      A value of null or undefined indicates that the navigation commands should be applied relative to the root.

                                                                                                                                                                                                                                                    Enums

                                                                                                                                                                                                                                                    enum EventType

                                                                                                                                                                                                                                                    const enum EventType {
                                                                                                                                                                                                                                                    NavigationStart = 0,
                                                                                                                                                                                                                                                    NavigationEnd = 1,
                                                                                                                                                                                                                                                    NavigationCancel = 2,
                                                                                                                                                                                                                                                    NavigationError = 3,
                                                                                                                                                                                                                                                    RoutesRecognized = 4,
                                                                                                                                                                                                                                                    ResolveStart = 5,
                                                                                                                                                                                                                                                    ResolveEnd = 6,
                                                                                                                                                                                                                                                    GuardsCheckStart = 7,
                                                                                                                                                                                                                                                    GuardsCheckEnd = 8,
                                                                                                                                                                                                                                                    RouteConfigLoadStart = 9,
                                                                                                                                                                                                                                                    RouteConfigLoadEnd = 10,
                                                                                                                                                                                                                                                    ChildActivationStart = 11,
                                                                                                                                                                                                                                                    ChildActivationEnd = 12,
                                                                                                                                                                                                                                                    ActivationStart = 13,
                                                                                                                                                                                                                                                    ActivationEnd = 14,
                                                                                                                                                                                                                                                    Scroll = 15,
                                                                                                                                                                                                                                                    }
                                                                                                                                                                                                                                                    • Identifies the type of a router event.

                                                                                                                                                                                                                                                    member ActivationEnd

                                                                                                                                                                                                                                                    ActivationEnd = 14

                                                                                                                                                                                                                                                      member ActivationStart

                                                                                                                                                                                                                                                      ActivationStart = 13

                                                                                                                                                                                                                                                        member ChildActivationEnd

                                                                                                                                                                                                                                                        ChildActivationEnd = 12

                                                                                                                                                                                                                                                          member ChildActivationStart

                                                                                                                                                                                                                                                          ChildActivationStart = 11

                                                                                                                                                                                                                                                            member GuardsCheckEnd

                                                                                                                                                                                                                                                            GuardsCheckEnd = 8

                                                                                                                                                                                                                                                              member GuardsCheckStart

                                                                                                                                                                                                                                                              GuardsCheckStart = 7

                                                                                                                                                                                                                                                                member NavigationCancel

                                                                                                                                                                                                                                                                NavigationCancel = 2

                                                                                                                                                                                                                                                                  member NavigationEnd

                                                                                                                                                                                                                                                                  NavigationEnd = 1

                                                                                                                                                                                                                                                                    member NavigationError

                                                                                                                                                                                                                                                                    NavigationError = 3

                                                                                                                                                                                                                                                                      member NavigationStart

                                                                                                                                                                                                                                                                      NavigationStart = 0

                                                                                                                                                                                                                                                                        member ResolveEnd

                                                                                                                                                                                                                                                                        ResolveEnd = 6

                                                                                                                                                                                                                                                                          member ResolveStart

                                                                                                                                                                                                                                                                          ResolveStart = 5

                                                                                                                                                                                                                                                                            member RouteConfigLoadEnd

                                                                                                                                                                                                                                                                            RouteConfigLoadEnd = 10

                                                                                                                                                                                                                                                                              member RouteConfigLoadStart

                                                                                                                                                                                                                                                                              RouteConfigLoadStart = 9

                                                                                                                                                                                                                                                                                member RoutesRecognized

                                                                                                                                                                                                                                                                                RoutesRecognized = 4

                                                                                                                                                                                                                                                                                  member Scroll

                                                                                                                                                                                                                                                                                  Scroll = 15

                                                                                                                                                                                                                                                                                    Type Aliases

                                                                                                                                                                                                                                                                                    type Data

                                                                                                                                                                                                                                                                                    type Data = {
                                                                                                                                                                                                                                                                                    [key: string | symbol]: any;
                                                                                                                                                                                                                                                                                    };
                                                                                                                                                                                                                                                                                    • Represents static data associated with a particular route.

                                                                                                                                                                                                                                                                                      See Also

                                                                                                                                                                                                                                                                                      • Route#data

                                                                                                                                                                                                                                                                                    type DetachedRouteHandle

                                                                                                                                                                                                                                                                                    type DetachedRouteHandle = {};
                                                                                                                                                                                                                                                                                    • Represents the detached route tree.

                                                                                                                                                                                                                                                                                      This is an opaque value the router will give to a custom route reuse strategy to store and retrieve later on.

                                                                                                                                                                                                                                                                                    type Event

                                                                                                                                                                                                                                                                                    type Event_2 =
                                                                                                                                                                                                                                                                                    | RouterEvent
                                                                                                                                                                                                                                                                                    | NavigationStart
                                                                                                                                                                                                                                                                                    | NavigationEnd
                                                                                                                                                                                                                                                                                    | NavigationCancel
                                                                                                                                                                                                                                                                                    | NavigationError
                                                                                                                                                                                                                                                                                    | RoutesRecognized
                                                                                                                                                                                                                                                                                    | GuardsCheckStart
                                                                                                                                                                                                                                                                                    | GuardsCheckEnd
                                                                                                                                                                                                                                                                                    | RouteConfigLoadStart
                                                                                                                                                                                                                                                                                    | RouteConfigLoadEnd
                                                                                                                                                                                                                                                                                    | ChildActivationStart
                                                                                                                                                                                                                                                                                    | ChildActivationEnd
                                                                                                                                                                                                                                                                                    | ActivationStart
                                                                                                                                                                                                                                                                                    | ActivationEnd
                                                                                                                                                                                                                                                                                    | Scroll
                                                                                                                                                                                                                                                                                    | ResolveStart
                                                                                                                                                                                                                                                                                    | ResolveEnd;
                                                                                                                                                                                                                                                                                    • Router events that allow you to track the lifecycle of the router.

                                                                                                                                                                                                                                                                                      The events occur in the following sequence:

                                                                                                                                                                                                                                                                                      * [NavigationStart](api/router/NavigationStart): Navigation starts. * [RouteConfigLoadStart](api/router/RouteConfigLoadStart): Before the router [lazy loads](/guide/router#lazy-loading) a route configuration. * [RouteConfigLoadEnd](api/router/RouteConfigLoadEnd): After a route has been lazy loaded. * [RoutesRecognized](api/router/RoutesRecognized): When the router parses the URL and the routes are recognized. * [GuardsCheckStart](api/router/GuardsCheckStart): When the router begins the *guards* phase of routing. * [ChildActivationStart](api/router/ChildActivationStart): When the router begins activating a route's children. * [ActivationStart](api/router/ActivationStart): When the router begins activating a route. * [GuardsCheckEnd](api/router/GuardsCheckEnd): When the router finishes the *guards* phase of routing successfully. * [ResolveStart](api/router/ResolveStart): When the router begins the *resolve* phase of routing. * [ResolveEnd](api/router/ResolveEnd): When the router finishes the *resolve* phase of routing successfully. * [ChildActivationEnd](api/router/ChildActivationEnd): When the router finishes activating a route's children. * [ActivationEnd](api/router/ActivationEnd): When the router finishes activating a route. * [NavigationEnd](api/router/NavigationEnd): When navigation ends successfully. * [NavigationCancel](api/router/NavigationCancel): When navigation is canceled. * [NavigationError](api/router/NavigationError): When navigation fails due to an unexpected error. * [Scroll](api/router/Scroll): When the user scrolls.

                                                                                                                                                                                                                                                                                    type InitialNavigation

                                                                                                                                                                                                                                                                                    type InitialNavigation = 'disabled' | 'enabledBlocking' | 'enabledNonBlocking';
                                                                                                                                                                                                                                                                                    • Allowed values in an ExtraOptions object that configure when the router performs the initial navigation operation.

                                                                                                                                                                                                                                                                                      * 'enabledNonBlocking' - (default) The initial navigation starts after the root component has been created. The bootstrap is not blocked on the completion of the initial navigation. * 'enabledBlocking' - The initial navigation starts before the root component is created. The bootstrap is blocked until the initial navigation is complete. This value is required for [server-side rendering](guide/universal) to work. * 'disabled' - The initial navigation is not performed. The location listener is set up before the root component gets created. Use if there is a reason to have more control over when the router starts its initial navigation due to some complex initialization logic.

                                                                                                                                                                                                                                                                                      The following values have been [deprecated](guide/releases#deprecation-practices) since v11, and should not be used for new applications.

                                                                                                                                                                                                                                                                                      See Also

                                                                                                                                                                                                                                                                                      • forRoot()

                                                                                                                                                                                                                                                                                    type LoadChildren

                                                                                                                                                                                                                                                                                    type LoadChildren = LoadChildrenCallback;
                                                                                                                                                                                                                                                                                    • A function that returns a set of routes to load.

                                                                                                                                                                                                                                                                                      See Also

                                                                                                                                                                                                                                                                                      • LoadChildrenCallback

                                                                                                                                                                                                                                                                                    type LoadChildrenCallback

                                                                                                                                                                                                                                                                                    type LoadChildrenCallback = () =>
                                                                                                                                                                                                                                                                                    | Type<any>
                                                                                                                                                                                                                                                                                    | NgModuleFactory<any>
                                                                                                                                                                                                                                                                                    | Routes
                                                                                                                                                                                                                                                                                    | Observable<Type<any> | Routes>
                                                                                                                                                                                                                                                                                    | Promise<NgModuleFactory<any> | Type<any> | Routes>;
                                                                                                                                                                                                                                                                                    • A function that is called to resolve a collection of lazy-loaded routes. Must be an arrow function of the following form: () => import('...').then(mod => mod.MODULE) or () => import('...').then(mod => mod.ROUTES)

                                                                                                                                                                                                                                                                                      For example:

                                                                                                                                                                                                                                                                                      [{
                                                                                                                                                                                                                                                                                      path: 'lazy',
                                                                                                                                                                                                                                                                                      loadChildren: () => import('./lazy-route/lazy.module').then(mod => mod.LazyModule),
                                                                                                                                                                                                                                                                                      }];

                                                                                                                                                                                                                                                                                      or

                                                                                                                                                                                                                                                                                      [{
                                                                                                                                                                                                                                                                                      path: 'lazy',
                                                                                                                                                                                                                                                                                      loadChildren: () => import('./lazy-route/lazy.routes').then(mod => mod.ROUTES),
                                                                                                                                                                                                                                                                                      }];

                                                                                                                                                                                                                                                                                      See Also

                                                                                                                                                                                                                                                                                      • [Route.loadChildren](api/router/Route#loadChildren)

                                                                                                                                                                                                                                                                                    type ɵRestoredState

                                                                                                                                                                                                                                                                                    type ɵRestoredState = {
                                                                                                                                                                                                                                                                                    [k: string]: any;
                                                                                                                                                                                                                                                                                    navigationId: number;
                                                                                                                                                                                                                                                                                    ɵrouterPageId?: number;
                                                                                                                                                                                                                                                                                    };

                                                                                                                                                                                                                                                                                      type Params

                                                                                                                                                                                                                                                                                      type Params = {
                                                                                                                                                                                                                                                                                      [key: string]: any;
                                                                                                                                                                                                                                                                                      };
                                                                                                                                                                                                                                                                                      • A collection of matrix and query URL parameters.

                                                                                                                                                                                                                                                                                        See Also

                                                                                                                                                                                                                                                                                        • convertToParamMap()

                                                                                                                                                                                                                                                                                        • ParamMap

                                                                                                                                                                                                                                                                                      type QueryParamsHandling

                                                                                                                                                                                                                                                                                      type QueryParamsHandling = 'merge' | 'preserve' | '';
                                                                                                                                                                                                                                                                                      • How to handle query parameters in a router link. One of: - "merge" : Merge new parameters with current parameters. - "preserve" : Preserve current parameters. - "" : Replace current parameters with new parameters. This is the default behavior.

                                                                                                                                                                                                                                                                                        See Also

                                                                                                                                                                                                                                                                                        • UrlCreationOptions#queryParamsHandling

                                                                                                                                                                                                                                                                                        • RouterLink

                                                                                                                                                                                                                                                                                      type ResolveData

                                                                                                                                                                                                                                                                                      type ResolveData = {
                                                                                                                                                                                                                                                                                      [key: string | symbol]: any;
                                                                                                                                                                                                                                                                                      };
                                                                                                                                                                                                                                                                                      • Represents the resolved data associated with a particular route.

                                                                                                                                                                                                                                                                                        See Also

                                                                                                                                                                                                                                                                                        • Route#resolve.

                                                                                                                                                                                                                                                                                      type Routes

                                                                                                                                                                                                                                                                                      type Routes = Route[];
                                                                                                                                                                                                                                                                                      • Represents a route configuration for the Router service. An array of Route objects, used in Router.config and for nested route configurations in Route.children.

                                                                                                                                                                                                                                                                                        See Also

                                                                                                                                                                                                                                                                                        • Route

                                                                                                                                                                                                                                                                                        • Router

                                                                                                                                                                                                                                                                                        • [Router configuration guide](guide/router-reference#configuration)

                                                                                                                                                                                                                                                                                      type RunGuardsAndResolvers

                                                                                                                                                                                                                                                                                      type RunGuardsAndResolvers =
                                                                                                                                                                                                                                                                                      | 'pathParamsChange'
                                                                                                                                                                                                                                                                                      | 'pathParamsOrQueryParamsChange'
                                                                                                                                                                                                                                                                                      | 'paramsChange'
                                                                                                                                                                                                                                                                                      | 'paramsOrQueryParamsChange'
                                                                                                                                                                                                                                                                                      | 'always'
                                                                                                                                                                                                                                                                                      | ((from: ActivatedRouteSnapshot, to: ActivatedRouteSnapshot) => boolean);
                                                                                                                                                                                                                                                                                      • A policy for when to run guards and resolvers on a route.

                                                                                                                                                                                                                                                                                        See Also

                                                                                                                                                                                                                                                                                        • [Route.runGuardsAndResolvers](api/router/Route#runGuardsAndResolvers)

                                                                                                                                                                                                                                                                                      type UrlMatcher

                                                                                                                                                                                                                                                                                      type UrlMatcher = (
                                                                                                                                                                                                                                                                                      segments: UrlSegment[],
                                                                                                                                                                                                                                                                                      group: UrlSegmentGroup,
                                                                                                                                                                                                                                                                                      route: Route
                                                                                                                                                                                                                                                                                      ) => UrlMatchResult | null;
                                                                                                                                                                                                                                                                                      • A function for matching a route against URLs. Implement a custom URL matcher for Route.matcher when a combination of path and pathMatch is not expressive enough. Cannot be used together with path and pathMatch.

                                                                                                                                                                                                                                                                                        The function takes the following arguments and returns a UrlMatchResult object. * *segments* : An array of URL segments. * *group* : A segment group. * *route* : The route to match against.

                                                                                                                                                                                                                                                                                        The following example implementation matches HTML files.

                                                                                                                                                                                                                                                                                        export function htmlFiles(url: UrlSegment[]) {
                                                                                                                                                                                                                                                                                        return url.length === 1 && url[0].path.endsWith('.html') ? ({consumed: url}) : null;
                                                                                                                                                                                                                                                                                        }
                                                                                                                                                                                                                                                                                        export const routes = [{ matcher: htmlFiles, component: AnyComponent }];

                                                                                                                                                                                                                                                                                      type UrlMatchResult

                                                                                                                                                                                                                                                                                      type UrlMatchResult = {
                                                                                                                                                                                                                                                                                      consumed: UrlSegment[];
                                                                                                                                                                                                                                                                                      posParams?: {
                                                                                                                                                                                                                                                                                      [name: string]: UrlSegment;
                                                                                                                                                                                                                                                                                      };
                                                                                                                                                                                                                                                                                      };
                                                                                                                                                                                                                                                                                      • Represents the result of matching URLs with a custom matching function.

                                                                                                                                                                                                                                                                                        * consumed is an array of the consumed URL segments. * posParams is a map of positional parameters.

                                                                                                                                                                                                                                                                                        See Also

                                                                                                                                                                                                                                                                                        • UrlMatcher()

                                                                                                                                                                                                                                                                                      Namespaces

                                                                                                                                                                                                                                                                                      namespace i1

                                                                                                                                                                                                                                                                                      namespace i1 {}

                                                                                                                                                                                                                                                                                        class RouterOutlet

                                                                                                                                                                                                                                                                                        class RouterOutlet implements OnDestroy, OnInit, RouterOutletContract {}
                                                                                                                                                                                                                                                                                        • Acts as a placeholder that Angular dynamically fills based on the current router state.

                                                                                                                                                                                                                                                                                          Each outlet can have a unique name, determined by the optional name attribute. The name cannot be set or changed dynamically. If not set, default value is "primary".

                                                                                                                                                                                                                                                                                          <router-outlet></router-outlet>
                                                                                                                                                                                                                                                                                          <router-outlet name='left'></router-outlet>
                                                                                                                                                                                                                                                                                          <router-outlet name='right'></router-outlet>

                                                                                                                                                                                                                                                                                          Named outlets can be the targets of secondary routes. The Route object for a secondary route has an outlet property to identify the target outlet:

                                                                                                                                                                                                                                                                                          {path: <base-path>, component: <component>, outlet: <target_outlet_name>}

                                                                                                                                                                                                                                                                                          Using named outlets and secondary routes, you can target multiple outlets in the same RouterLink directive.

                                                                                                                                                                                                                                                                                          The router keeps track of separate branches in a navigation tree for each named outlet and generates a representation of that tree in the URL. The URL for a secondary route uses the following syntax to specify both the primary and secondary routes at the same time:

                                                                                                                                                                                                                                                                                          http://base-path/primary-route-path(outlet-name:route-path)

                                                                                                                                                                                                                                                                                          A router outlet emits an activate event when a new component is instantiated, deactivate event when a component is destroyed. An attached event emits when the RouteReuseStrategy instructs the outlet to reattach the subtree, and the detached event emits when the RouteReuseStrategy instructs the outlet to detach the subtree.

                                                                                                                                                                                                                                                                                          <router-outlet
                                                                                                                                                                                                                                                                                          (activate)='onActivate($event)'
                                                                                                                                                                                                                                                                                          (deactivate)='onDeactivate($event)'
                                                                                                                                                                                                                                                                                          (attach)='onAttach($event)'
                                                                                                                                                                                                                                                                                          (detach)='onDetach($event)'></router-outlet>

                                                                                                                                                                                                                                                                                          See Also

                                                                                                                                                                                                                                                                                          • [Routing tutorial](guide/router-tutorial-toh#named-outlets "Example of a named outlet and secondary route configuration").

                                                                                                                                                                                                                                                                                          • RouterLink

                                                                                                                                                                                                                                                                                          • Route RouterModule