@angular/router
- Version 19.2.1
- Published
- 1.18 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
- convertToParamMap()
- createUrlTreeFromSnapshot()
- defaultUrlMatcher()
- mapToCanActivate()
- mapToCanActivateChild()
- mapToCanDeactivate()
- mapToCanMatch()
- mapToResolve()
- ɵafterNextNavigation()
- ɵloadChildren()
- provideRouter()
- provideRoutes()
- standardizeConfig()
- withComponentInputBinding()
- withDebugTracing()
- withDisabledInitialNavigation()
- withEnabledBlockingInitialNavigation()
- withHashLocation()
- withInMemoryScrolling()
- withNavigationErrorHandler()
- withPreloading()
- withRouterConfig()
- withViewTransitions()
Classes
Router
- componentInputBindingEnabled
- config
- createUrlTree()
- dispose()
- events
- getCurrentNavigation()
- initialNavigation()
- isActive()
- lastSuccessfulNavigation
- navigate()
- navigateByUrl()
- navigated
- ngOnDestroy()
- onSameUrlNavigation
- ɵfac
- ɵprov
- parseUrl()
- resetConfig()
- routeReuseStrategy
- routerState
- serializeUrl()
- setUpLocationChangeListener()
- url
Interfaces
Enums
Type Aliases
- CanActivateChildFn
- CanActivateFn
- CanDeactivateFn
- CanLoadFn
- CanMatchFn
- ComponentInputBindingFeature
- Data
- DebugTracingFeature
- DeprecatedGuard
- DetachedRouteHandle
- DisabledInitialNavigationFeature
- EnabledBlockingInitialNavigationFeature
- Event
- GuardResult
- InitialNavigation
- InitialNavigationFeature
- InMemoryScrollingFeature
- LoadChildren
- LoadChildrenCallback
- MaybeAsync
- NavigationErrorHandlerFeature
- OnSameUrlNavigation
- ɵRestoredState
- Params
- PreloadingFeature
- QueryParamsHandling
- RedirectFunction
- ResolveData
- ResolveFn
- RouterConfigurationFeature
- RouterFeatures
- RouterHashLocationFeature
- Routes
- RunGuardsAndResolvers
- UrlMatcher
- UrlMatchResult
- ViewTransitionsFeature
Namespaces
Variables
variable INPUT_BINDER
const INPUT_BINDER: InjectionToken<RoutedComponentInputBinder>;
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 for the router service.
variable ROUTER_INITIALIZER
const ROUTER_INITIALIZER: InjectionToken<(compRef: ComponentRef<any>) => void>;
A DI token for the router initializer that is called after the app is bootstrapped.
variable ROUTER_OUTLET_DATA
const ROUTER_OUTLET_DATA: InjectionToken<Signal<unknown>>;
An
InjectionToken
provided by theRouterOutlet
and can be set using therouterOutletData
input.When unset, this value is
null
by default.To set the data from the template of the component with
router-outlet
:<router-outlet [routerOutletData]="{name: 'Angular'}" />To read the data in the routed component:
data = inject(ROUTER_OUTLET_DATA) as Signal<{name: string}>;
variable ROUTES
const ROUTES: InjectionToken<Route[][]>;
The 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()
,provideRouter
, orRouter.resetConfig()
.
variable VERSION
const VERSION: Version;
Functions
function convertToParamMap
convertToParamMap: (params: Params) => ParamMap;
Converts a
Params
instance to aParamMap
.Parameter params
The instance to convert.
Returns
The new map instance.
function createUrlTreeFromSnapshot
createUrlTreeFromSnapshot: ( relativeTo: ActivatedRouteSnapshot, commands: any[], queryParams?: Params | null, fragment?: string | null) => UrlTree;
Creates a
UrlTree
relative to anActivatedRouteSnapshot
.Parameter relativeTo
The
ActivatedRouteSnapshot
to apply the commands toParameter 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 one provided in the
relativeTo
parameter.Parameter queryParams
The query parameters for the
UrlTree
.null
if theUrlTree
does not have any query parameters.Parameter fragment
The fragment for the
UrlTree
.null
if theUrlTree
does not have a fragment.// create /team/33/user/11createUrlTreeFromSnapshot(snapshot, ['/team', 33, 'user', 11]);// create /team/33;expand=true/user/11createUrlTreeFromSnapshot(snapshot, ['/team', 33, {expand: true}, 'user', 11]);// you can collapse static segments like this (this works only with the first passed-in value):createUrlTreeFromSnapshot(snapshot, ['/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:createUrlTreeFromSnapshot(snapshot, [{segmentPath: '/one/two'}]);// create /team/33/(user/11//right:chat)createUrlTreeFromSnapshot(snapshot, ['/team', 33, {outlets: {primary: 'user/11', right:'chat'}}], null, null);// remove the right secondary nodecreateUrlTreeFromSnapshot(snapshot, ['/team', 33, {outlets: {primary: 'user/11', right: null}}]);// For the examples below, assume the current URL is for the `/team/33/user/11` and the`ActivatedRouteSnapshot` points to `user/11`:// navigate to /team/33/user/11/detailscreateUrlTreeFromSnapshot(snapshot, ['details']);// navigate to /team/33/user/22createUrlTreeFromSnapshot(snapshot, ['../22']);// navigate to /team/44/user/22createUrlTreeFromSnapshot(snapshot, ['../../team/44/user/22']);
function defaultUrlMatcher
defaultUrlMatcher: ( segments: UrlSegment[], segmentGroup: UrlSegmentGroup, route: Route) => UrlMatchResult | null;
Matches the route configuration (
route
) against the actual URL (segments
).When no matcher is defined on a
Route
, this is the matcher used by the Router by default.Parameter segments
The remaining unmatched segments in the current navigation
Parameter segmentGroup
The current segment group being matched
Parameter route
The
Route
to match against.Returns
The resulting match information or
null
if theroute
should not match.See Also
function mapToCanActivate
mapToCanActivate: (providers: Array<Type<CanActivate>>) => CanActivateFn[];
Maps an array of injectable classes with canActivate functions to an array of equivalent
CanActivateFn
for use in aRoute
definition.Usage
See Also
function mapToCanActivateChild
mapToCanActivateChild: ( providers: Array<Type<CanActivateChild>>) => CanActivateChildFn[];
Maps an array of injectable classes with canActivateChild functions to an array of equivalent
CanActivateChildFn
for use in aRoute
definition.Usage
See Also
function mapToCanDeactivate
mapToCanDeactivate: <T = unknown>( providers: Array<Type<CanDeactivate<T>>>) => CanDeactivateFn<T>[];
Maps an array of injectable classes with canDeactivate functions to an array of equivalent
CanDeactivateFn
for use in aRoute
definition.Usage
See Also
function mapToCanMatch
mapToCanMatch: (providers: Array<Type<CanMatch>>) => CanMatchFn[];
Maps an array of injectable classes with canMatch functions to an array of equivalent
CanMatchFn
for use in aRoute
definition.Usage
See Also
function mapToResolve
mapToResolve: <T>(provider: Type<Resolve<T>>) => ResolveFn<T>;
Maps an injectable class with a resolve function to an equivalent
ResolveFn
for use in aRoute
definition.Usage
See Also
function ɵafterNextNavigation
ɵafterNextNavigation: ( router: { events: Observable<Event_2> }, action: () => void) => void;
Performs the given action once the router finishes its next/current navigation.
The navigation is considered complete under the following conditions: -
NavigationCancel
event emits and the code is notNavigationCancellationCode.Redirect
orNavigationCancellationCode.SupersededByNewNavigation
. In these cases, the redirecting/superseding navigation must finish. -NavigationError
,NavigationEnd
, orNavigationSkipped
event emits
function ɵloadChildren
ɵloadChildren: ( route: Route, compiler: Compiler, parentInjector: Injector, onLoadEndListener?: (r: Route) => void) => Observable<LoadedRouterConfig>;
Executes a
route.loadChildren
callback and converts the result to an array of child routes and an injector if that callback returned a module.This function is used for the route discovery during prerendering in @angular-devkit/build-angular. If there are any updates to the contract here, it will require an update to the extractor.
function provideRouter
provideRouter: ( routes: Routes, ...features: RouterFeatures[]) => EnvironmentProviders;
Sets up providers necessary to enable
Router
functionality for the application. Allows to configure a set of routes as well as extra features that should be enabled.Basic example of how you can add a Router to your application:
const appRoutes: Routes = [];bootstrapApplication(AppComponent, {providers: [provideRouter(appRoutes)]});You can also enable optional features in the Router by adding functions from the
RouterFeatures
type:const appRoutes: Routes = [];bootstrapApplication(AppComponent,{providers: [provideRouter(appRoutes,withDebugTracing(),withRouterConfig({paramsInheritanceStrategy: 'always'}))]});Parameter routes
A set of
Route
s to use for the application routing table.Parameter features
Optional features to configure additional router behaviors.
Returns
A set of providers to setup a Router.
See Also
function provideRoutes
provideRoutes: (routes: Routes) => Provider[];
Registers a DI provider for a set of routes.
Parameter routes
The route configuration to provide.
@NgModule({providers: [provideRoutes(ROUTES)]})class LazyLoadedChildModule {}See Also
Deprecated
If necessary, provide routes using the
ROUTES
InjectionToken
.
function standardizeConfig
standardizeConfig: (r: Route) => Route;
Makes a copy of the config and adds any default required properties.
function withComponentInputBinding
withComponentInputBinding: () => ComponentInputBindingFeature;
Enables binding information from the
Router
state directly to the inputs of the component inRoute
configurations.Basic example of how you can enable the feature:
const appRoutes: Routes = [];bootstrapApplication(AppComponent,{providers: [provideRouter(appRoutes, withComponentInputBinding())]});The router bindings information from any of the following sources:
- query parameters - path and matrix parameters - static route data - data from resolvers
Duplicate keys are resolved in the same order from above, from least to greatest, meaning that resolvers have the highest precedence and override any of the other information from the route.
Importantly, when an input does not have an item in the route data with a matching key, this input is set to
undefined
. This prevents previous information from being retained if the data got removed from the route (i.e. if a query parameter is removed). Default values can be provided with a resolver on the route to ensure the value is always present or an input and use an input transform in the component.Returns
A set of providers for use with
provideRouter
.See Also
function withDebugTracing
withDebugTracing: () => DebugTracingFeature;
Enables logging of all internal navigation events to the console. Extra logging might be useful for debugging purposes to inspect Router event sequence.
Basic example of how you can enable debug tracing:
const appRoutes: Routes = [];bootstrapApplication(AppComponent,{providers: [provideRouter(appRoutes, withDebugTracing())]});Returns
A set of providers for use with
provideRouter
.See Also
function withDisabledInitialNavigation
withDisabledInitialNavigation: () => DisabledInitialNavigationFeature;
Disables initial navigation.
Use if there is a reason to have more control over when the router starts its initial navigation due to some complex initialization logic.
Basic example of how you can disable initial navigation:
const appRoutes: Routes = [];bootstrapApplication(AppComponent,{providers: [provideRouter(appRoutes, withDisabledInitialNavigation())]});Returns
A set of providers for use with
provideRouter
.See Also
function withEnabledBlockingInitialNavigation
withEnabledBlockingInitialNavigation: () => EnabledBlockingInitialNavigationFeature;
Configures initial navigation to start before the root component is created.
The bootstrap is blocked until the initial navigation is complete. This should be set in case you use [server-side rendering](guide/ssr), but do not enable [hydration](guide/hydration) for your application.
Basic example of how you can enable this navigation behavior:
const appRoutes: Routes = [];bootstrapApplication(AppComponent,{providers: [provideRouter(appRoutes, withEnabledBlockingInitialNavigation())]});Returns
A set of providers for use with
provideRouter
.See Also
function withHashLocation
withHashLocation: () => RouterHashLocationFeature;
Provides the location strategy that uses the URL fragment instead of the history API.
Basic example of how you can use the hash location option:
const appRoutes: Routes = [];bootstrapApplication(AppComponent,{providers: [provideRouter(appRoutes, withHashLocation())]});Returns
A set of providers for use with
provideRouter
.See Also
function withInMemoryScrolling
withInMemoryScrolling: ( options?: InMemoryScrollingOptions) => InMemoryScrollingFeature;
Enables customizable scrolling behavior for router navigations.
Basic example of how you can enable scrolling feature:
const appRoutes: Routes = [];bootstrapApplication(AppComponent,{providers: [provideRouter(appRoutes, withInMemoryScrolling())]});Parameter options
Set of configuration parameters to customize scrolling behavior, see
InMemoryScrollingOptions
for additional information.Returns
A set of providers for use with
provideRouter
.See Also
function withNavigationErrorHandler
withNavigationErrorHandler: ( handler: (error: NavigationError) => unknown | RedirectCommand) => NavigationErrorHandlerFeature;
Provides a function which is called when a navigation error occurs.
This function is run inside application's [injection context](guide/di/dependency-injection-context) so you can use the [
inject
](api/core/inject) function.This function can return a
RedirectCommand
to convert the error to a redirect, similar to returning aUrlTree
orRedirectCommand
from a guard. This will also prevent theRouter
from emittingNavigationError
; it will instead emitNavigationCancel
with code NavigationCancellationCode.Redirect. Return values other thanRedirectCommand
are ignored and do not change any behavior with respect to how theRouter
handles the error.Basic example of how you can use the error handler option:
const appRoutes: Routes = [];bootstrapApplication(AppComponent,{providers: [provideRouter(appRoutes, withNavigationErrorHandler((e: NavigationError) =>inject(MyErrorTracker).trackError(e)))]});Returns
A set of providers for use with
provideRouter
.See Also
function withPreloading
withPreloading: ( preloadingStrategy: Type<PreloadingStrategy>) => PreloadingFeature;
Allows to configure a preloading strategy to use. The strategy is configured by providing a reference to a class that implements a
PreloadingStrategy
.Basic example of how you can configure preloading:
const appRoutes: Routes = [];bootstrapApplication(AppComponent,{providers: [provideRouter(appRoutes, withPreloading(PreloadAllModules))]});Parameter preloadingStrategy
A reference to a class that implements a
PreloadingStrategy
that should be used.Returns
A set of providers for use with
provideRouter
.See Also
function withRouterConfig
withRouterConfig: (options: RouterConfigOptions) => RouterConfigurationFeature;
Allows to provide extra parameters to configure Router.
Basic example of how you can provide extra configuration options:
const appRoutes: Routes = [];bootstrapApplication(AppComponent,{providers: [provideRouter(appRoutes, withRouterConfig({onSameUrlNavigation: 'reload'}))]});Parameter options
A set of parameters to configure Router, see
RouterConfigOptions
for additional information.Returns
A set of providers for use with
provideRouter
.See Also
function withViewTransitions
withViewTransitions: ( options?: ViewTransitionsFeatureOptions) => ViewTransitionsFeature;
Enables view transitions in the Router by running the route activation and deactivation inside of
document.startViewTransition
.Note: The View Transitions API is not available in all browsers. If the browser does not support view transitions, the Router will not attempt to start a view transition and continue processing the navigation as usual.
Basic example of how you can enable the feature:
const appRoutes: Routes = [];bootstrapApplication(AppComponent,{providers: [provideRouter(appRoutes, withViewTransitions())]});Returns
A set of providers for use with
provideRouter
.See Also
https://developer.chrome.com/docs/web-platform/view-transitions/
https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API
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 theActivatedRoute.data
Observable
to emit a new value.See Also
[Getting route information](guide/routing/common-router-tasks#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 title
readonly title: Observable<string>;
An Observable of the resolved route title
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: ```ts 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 title
readonly title: string;
The resolved route title
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
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
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 route parameters, query parameters or fragment 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
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
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
constructor
constructor(rootInjector: EnvironmentInjector);
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<ChildrenOutletContexts, never>;
property ɵprov
static ɵprov: i0.ɵɵInjectableDeclaration<ChildrenOutletContexts>;
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 theTitle
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/44DefaultUrlSerializer 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.
class GuardsCheckEnd
class GuardsCheckEnd extends RouterEvent {}
An event triggered at the end of the Guard phase of routing.
See Also
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
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
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 aUrlTree
.See Also
constructor
constructor( id: number, url: string, reason: string, code?: NavigationCancellationCode);
property code
readonly code?: NavigationCancellationCode;
A code to indicate why the navigation was canceled. This cancellation code is stable for the reason and can be relied on whereas the
reason
string could change and should not be used in production.
property reason
reason: string;
A description of why the navigation was cancelled. For debug purposes only. Use
code
instead for a stable cancellation reason that can be used in production.
property type
readonly type: number;
method toString
toString: () => string;
class NavigationEnd
class NavigationEnd extends RouterEvent {}
An event triggered when a navigation ends successfully.
See Also
constructor
constructor(id: number, url: string, urlAfterRedirects: string);
property type
readonly type: number;
property urlAfterRedirects
urlAfterRedirects: string;
method toString
toString: () => string;
class NavigationError
class NavigationError extends RouterEvent {}
An event triggered when a navigation fails due to an unexpected error.
See Also
constructor
constructor(id: number, url: string, error: any, target?: RouterStateSnapshot);
property error
error: any;
property target
readonly target?: RouterStateSnapshot;
The target of the navigation when the error occurred.
Note that this can be
undefined
because an error could have occurred before theRouterStateSnapshot
was created for the navigation.
property type
readonly type: number;
method toString
toString: () => string;
class NavigationSkipped
class NavigationSkipped extends RouterEvent {}
An event triggered when a navigation is skipped. This can happen for a couple reasons including onSameUrlHandling is set to
ignore
and the navigation URL is not different than the current state.
constructor
constructor( id: number, url: string, reason: string, code?: NavigationSkippedCode);
property code
readonly code?: NavigationSkippedCode;
A code to indicate why the navigation was skipped. This code is stable for the reason and can be relied on whereas the
reason
string could change and should not be used in production.
property reason
reason: string;
A description of why the navigation was skipped. For debug purposes only. Use
code
instead for a stable skipped reason that can be used in production.
property type
readonly type: number;
class NavigationStart
class NavigationStart extends RouterEvent {}
An event triggered when a navigation starts.
constructor
constructor( id: number, url: string, navigationTrigger?: NavigationTrigger, restoredState?: { [k: string]: any; navigationId: number });
property navigationTrigger
navigationTrigger?: NavigationTrigger;
Identifies the call or event that triggered the navigation. An
imperative
trigger is a call torouter.navigateByUrl()
orrouter.navigate()
.See Also
property restoredState
restoredState?: { [k: string]: any; navigationId: number };
The navigation state that was previously supplied to the
pushState
call, when the navigation is triggered by apopstate
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.
property type
readonly type: number;
method toString
toString: () => string;
class NoPreloading
class NoPreloading implements PreloadingStrategy {}
Provides a preloading strategy that does not preload any modules.
This strategy is enabled by default.
class OutletContext
class OutletContext {}
Store contextual information about a
RouterOutlet
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
.
class PreloadAllModules
class PreloadAllModules implements PreloadingStrategy {}
Provides a preloading strategy that preloads all modules as quickly as possible.
RouterModule.forRoot(ROUTES, {preloadingStrategy: PreloadAllModules})
class PreloadingStrategy
abstract class PreloadingStrategy {}
Provides a preloading strategy.
method preload
abstract preload: (route: Route, fn: () => Observable<any>) => Observable<any>;
class RedirectCommand
class RedirectCommand {}
Can be returned by a
Router
guard to instruct theRouter
to redirect rather than continue processing the path of the in-flight navigation. TheredirectTo
indicates _where_ the new navigation should go to and the optionalnavigationBehaviorOptions
can provide more information about _how_ to perform the navigation.const route: Route = {path: "user/:userId",component: User,canActivate: [() => {const router = inject(Router);const authService = inject(AuthenticationService);if (!authService.isLoggedIn()) {const loginPath = router.parseUrl("/login");return new RedirectCommand(loginPath, {skipLocationChange: "true",});}return true;},],};See Also
[Routing guide](guide/routing/common-router-tasks#preventing-unauthorized-access)
constructor
constructor( redirectTo: UrlTree, navigationBehaviorOptions?: NavigationBehaviorOptions);
property navigationBehaviorOptions
readonly navigationBehaviorOptions?: NavigationBehaviorOptions;
property redirectTo
readonly redirectTo: UrlTree;
class ResolveEnd
class ResolveEnd extends RouterEvent {}
An event triggered at the end of the Resolve phase of routing.
See Also
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
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
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
constructor
constructor(route: Route);
property route
route: Route;
property type
readonly type: number;
method toString
toString: () => string;
class Router
class Router {}
A service that facilitates navigation among views and URL manipulation capabilities. This service is provided in the root scope and configured with [provideRouter](api/router/provideRouter).
See Also
[Routing and Navigation Guide](guide/routing/common-router-tasks).
RouterModule
constructor
constructor();
property componentInputBindingEnabled
readonly componentInputBindingEnabled: boolean;
Indicates whether the application has opted in to binding Router data to component inputs.
This option is enabled by the
withComponentInputBinding
feature ofprovideRouter
orbindToComponentInputs
in theExtraOptions
ofRouterModule.forRoot
.
property config
config: Routes;
property events
readonly events: Observable<Event_2>;
An event stream for routing events.
property lastSuccessfulNavigation
readonly lastSuccessfulNavigation: Navigation;
The
Navigation
object of the most recent navigation to succeed andnull
if there has not been a successful navigation yet.
property navigated
navigated: boolean;
True if at least one navigation event has occurred, false otherwise.
property onSameUrlNavigation
onSameUrlNavigation: OnSameUrlNavigation;
How to handle a navigation request to the current URL.
See Also
Deprecated
Configure this through
provideRouter
orRouterModule.forRoot
instead.
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<Router, never>;
property ɵprov
static ɵprov: i0.ɵɵInjectableDeclaration<Router>;
property routeReuseStrategy
routeReuseStrategy: RouteReuseStrategy;
A strategy for re-using routes.
Deprecated
Configure using
providers
instead:{provide: RouteReuseStrategy, useClass: MyStrategy}
.
property routerState
readonly routerState: RouterState_2;
The current state of routing in this NgModule.
property url
readonly url: string;
The current URL.
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/11router.createUrlTree(['/team', 33, 'user', 11]);// create /team/33;expand=true/user/11router.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 noderouter.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/detailsrouter.createUrlTree(['details'], {relativeTo: route});// navigate to /team/33/user/22router.createUrlTree(['../22'], {relativeTo: route});// navigate to /team/44/user/22router.createUrlTree(['../../team/44/user/22'], {relativeTo: route});Note that a value of `null` or `undefined` for `relativeTo` indicates that thetree 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, andnull
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
fortrue
is{paths: 'exact', queryParams: 'exact', fragment: 'ignored', matrixParams: 'ignored'}
. - The equivalent forfalse
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, orfalse
when navigation fails. The Promise is rejected when an error occurs ifresolveNavigationPromiseOnError
is nottrue
.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 behaviorrouter.navigate(['team', 33, 'user', 11], {relativeTo: route, skipLocationChange: true});See Also
[Routing and Navigation guide](guide/routing/common-router-tasks)
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 URLrouter.navigateByUrl("/team/33/user/11", { skipLocationChange: true });See Also
[Routing and Navigation guide](guide/routing/common-router-tasks)
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.
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<RouteReuseStrategy, never>;
property ɵprov
static ɵprov: i0.ɵɵInjectableDeclaration<RouteReuseStrategy>;
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 | RouterEvent): e is RouterEvent => e instanceof RouterEvent)).subscribe((e: RouterEvent) => {// Do something});}}See Also
[Router events summary](guide/routing/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
class RouterLink implements OnChanges, OnDestroy {}
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 Router#createUrlTree 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 givenqueryParams
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>queryParams
,fragment
,queryParamsHandling
,preserveFragment
, andrelativeTo
cannot be used when therouterLink
input is aUrlTree
.See UrlCreationOptions#queryParamsHandling.
### 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 Router#getCurrentNavigation to retrieve a saved navigation-state value. For example, to capture the
tracingId
during theNavigationStart
event:// Get NavigationStart eventsrouter.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, locationStrategy?: any);
property fragment
fragment?: string;
Passed to Router#createUrlTree as part of the
UrlCreationOptions
.See Also
property href
href: string;
Represents an
href
attribute value applied to a host element, when a host element is<a>
. For other tags, the value isnull
.
property info
info?: {};
Passed to Router#navigateByUrl as part of the
NavigationBehaviorOptions
.See Also
property ngAcceptInputType_preserveFragment
static ngAcceptInputType_preserveFragment: {};
property ngAcceptInputType_replaceUrl
static ngAcceptInputType_replaceUrl: {};
property ngAcceptInputType_skipLocationChange
static ngAcceptInputType_skipLocationChange: {};
property ɵdir
static ɵdir: i0.ɵɵDirectiveDeclaration< RouterLink, '[routerLink]', never, { target: { alias: 'target'; required: false }; queryParams: { alias: 'queryParams'; required: false }; fragment: { alias: 'fragment'; required: false }; queryParamsHandling: { alias: 'queryParamsHandling'; required: false }; state: { alias: 'state'; required: false }; info: { alias: 'info'; required: false }; relativeTo: { alias: 'relativeTo'; required: false }; preserveFragment: { alias: 'preserveFragment'; required: false }; skipLocationChange: { alias: 'skipLocationChange'; required: false }; replaceUrl: { alias: 'replaceUrl'; required: false }; routerLink: { alias: 'routerLink'; required: false }; }, {}, never, never, true, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration< RouterLink, [null, null, { attribute: 'tabindex' }, null, null, null]>;
property preserveFragment
preserveFragment: boolean;
Passed to Router#createUrlTree as part of the
UrlCreationOptions
.See Also
property queryParams
queryParams?: Params;
Passed to Router#createUrlTree as part of the
UrlCreationOptions
.See Also
property queryParamsHandling
queryParamsHandling?: QueryParamsHandling;
Passed to Router#createUrlTree as part of the
UrlCreationOptions
.See Also
property relativeTo
relativeTo?: ActivatedRoute;
Passed to Router#createUrlTree as part of the
UrlCreationOptions
. Specify a value here when you do not want to use the default value forrouterLink
, which is the current activated route. Note that a value ofundefined
here will use therouterLink
default.See Also
property replaceUrl
replaceUrl: boolean;
Passed to Router#navigateByUrl as part of the
NavigationBehaviorOptions
.See Also
property skipLocationChange
skipLocationChange: boolean;
Passed to Router#navigateByUrl as part of the
NavigationBehaviorOptions
.See Also
property state
state?: { [k: string]: any };
Passed to Router#navigateByUrl as part of the
NavigationBehaviorOptions
.See Also
property target
target?: string;
Represents the
target
attribute on a host element. This is only used when the host element is an<a>
tag.
property urlTree
readonly urlTree: UrlTree;
method ngOnChanges
ngOnChanges: (changes?: SimpleChanges) => void;
method ngOnDestroy
ngOnDestroy: () => any;
method onClick
onClick: ( button: number, ctrlKey: boolean, shiftKey: boolean, altKey: boolean, metaKey: boolean) => 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 theRouterLinkActive
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);
property ariaCurrentWhenActive
ariaCurrentWhenActive?: boolean | 'page' | 'step' | 'location' | 'date' | 'time';
Aria-current attribute to apply when the router link is active.
Possible values:
'page'
|'step'
|'location'
|'date'
|'time'
|true
|false
.See Also
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
<arouterLink="/user/bob"routerLinkActive="active-link"(isActiveChange)="this.onRouterLinkActive($event)">Bob</a>
property links
links: QueryList<RouterLink>;
property ɵdir
static ɵdir: i0.ɵɵDirectiveDeclaration< RouterLinkActive, '[routerLinkActive]', ['routerLinkActive'], { routerLinkActiveOptions: { alias: 'routerLinkActiveOptions'; required: false; }; ariaCurrentWhenActive: { alias: 'ariaCurrentWhenActive'; required: false; }; routerLinkActive: { alias: 'routerLinkActive'; required: false }; }, { isActiveChange: 'isActiveChange' }, ['links'], never, true, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration< RouterLinkActive, [null, null, null, null, { 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
method ngAfterContentInit
ngAfterContentInit: () => void;
method ngOnChanges
ngOnChanges: (changes: SimpleChanges) => void;
method ngOnDestroy
ngOnDestroy: () => void;
class RouterLinkWithHref
class RouterLink implements OnChanges, OnDestroy {}
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 Router#createUrlTree 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 givenqueryParams
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>queryParams
,fragment
,queryParamsHandling
,preserveFragment
, andrelativeTo
cannot be used when therouterLink
input is aUrlTree
.See UrlCreationOptions#queryParamsHandling.
### 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 Router#getCurrentNavigation to retrieve a saved navigation-state value. For example, to capture the
tracingId
during theNavigationStart
event:// Get NavigationStart eventsrouter.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, locationStrategy?: any);
property fragment
fragment?: string;
Passed to Router#createUrlTree as part of the
UrlCreationOptions
.See Also
property href
href: string;
Represents an
href
attribute value applied to a host element, when a host element is<a>
. For other tags, the value isnull
.
property info
info?: {};
Passed to Router#navigateByUrl as part of the
NavigationBehaviorOptions
.See Also
property ngAcceptInputType_preserveFragment
static ngAcceptInputType_preserveFragment: {};
property ngAcceptInputType_replaceUrl
static ngAcceptInputType_replaceUrl: {};
property ngAcceptInputType_skipLocationChange
static ngAcceptInputType_skipLocationChange: {};
property ɵdir
static ɵdir: i0.ɵɵDirectiveDeclaration< RouterLink, '[routerLink]', never, { target: { alias: 'target'; required: false }; queryParams: { alias: 'queryParams'; required: false }; fragment: { alias: 'fragment'; required: false }; queryParamsHandling: { alias: 'queryParamsHandling'; required: false }; state: { alias: 'state'; required: false }; info: { alias: 'info'; required: false }; relativeTo: { alias: 'relativeTo'; required: false }; preserveFragment: { alias: 'preserveFragment'; required: false }; skipLocationChange: { alias: 'skipLocationChange'; required: false }; replaceUrl: { alias: 'replaceUrl'; required: false }; routerLink: { alias: 'routerLink'; required: false }; }, {}, never, never, true, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration< RouterLink, [null, null, { attribute: 'tabindex' }, null, null, null]>;
property preserveFragment
preserveFragment: boolean;
Passed to Router#createUrlTree as part of the
UrlCreationOptions
.See Also
property queryParams
queryParams?: Params;
Passed to Router#createUrlTree as part of the
UrlCreationOptions
.See Also
property queryParamsHandling
queryParamsHandling?: QueryParamsHandling;
Passed to Router#createUrlTree as part of the
UrlCreationOptions
.See Also
property relativeTo
relativeTo?: ActivatedRoute;
Passed to Router#createUrlTree as part of the
UrlCreationOptions
. Specify a value here when you do not want to use the default value forrouterLink
, which is the current activated route. Note that a value ofundefined
here will use therouterLink
default.See Also
property replaceUrl
replaceUrl: boolean;
Passed to Router#navigateByUrl as part of the
NavigationBehaviorOptions
.See Also
property skipLocationChange
skipLocationChange: boolean;
Passed to Router#navigateByUrl as part of the
NavigationBehaviorOptions
.See Also
property state
state?: { [k: string]: any };
Passed to Router#navigateByUrl as part of the
NavigationBehaviorOptions
.See Also
property target
target?: string;
Represents the
target
attribute on a host element. This is only used when the host element is an<a>
tag.
property urlTree
readonly urlTree: UrlTree;
method ngOnChanges
ngOnChanges: (changes?: SimpleChanges) => void;
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 anNgModule
that contains all the directives, the given routes, and theRouter
service itself. * TheforChild()
method creates anNgModule
that contains all the directives and the given routes, but does not include theRouter
service.See Also
[Routing and Navigation guide](guide/routing/common-router-tasks) for an overview of how the
Router
service should be used.
constructor
constructor();
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<RouterModule, never>;
property ɵinj
static ɵinj: i0.ɵɵInjectorDeclaration<RouterModule>;
property ɵmod
static ɵmod: i0.ɵɵNgModuleDeclaration< RouterModule, never, [ typeof RouterOutlet, typeof RouterLink, typeof RouterLinkActive, typeof ɵEmptyOutletComponent ], [ typeof RouterOutlet, typeof RouterLink, 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 newNgModule
.
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 anoutlet
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 theRouteReuseStrategy
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
Route RouterModule
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 name
name: string;
The name of the outlet
property ɵdir
static ɵdir: i0.ɵɵDirectiveDeclaration< RouterOutlet, 'router-outlet', ['outlet'], { name: { alias: 'name'; required: false }; routerOutletData: { alias: 'routerOutletData'; required: false; isSignal: true; }; }, { activateEvents: 'activate'; deactivateEvents: 'deactivate'; attachEvents: 'attach'; detachEvents: 'detach'; }, never, never, true, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<RouterOutlet, never>;
property routerOutletData
readonly routerOutletData: InputSignal<unknown>;
Data that will be provided to the child injector through the
ROUTER_OUTLET_DATA
token.When unset, the value of the token is
undefined
by default.
property supportsBindingToComponentInputs
readonly supportsBindingToComponentInputs: boolean;
method activateWith
activateWith: ( activatedRoute: ActivatedRoute, environmentInjector: EnvironmentInjector) => 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 ngOnChanges
ngOnChanges: (changes: SimpleChanges) => void;
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 theActivatedRoute
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
[Getting route information](guide/routing/common-router-tasks#getting-route-information)
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);//...}}
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 | NavigationSkipped, position: [number, number], anchor: string);
property anchor
readonly anchor: string;
property position
readonly position: [number, number];
property routerEvent
readonly routerEvent: NavigationEnd | NavigationSkipped;
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 theRoutes
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, thetitle
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/routing/common-router-tasks#setting-the-page-title)
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<TitleStrategy, never>;
property ɵprov
static ɵprov: i0.ɵɵInjectableDeclaration<TitleStrategy>;
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 theRoute.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.
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<UrlHandlingStrategy, never>;
property ɵprov
static ɵprov: i0.ɵɵInjectableDeclaration<UrlHandlingStrategy>;
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.
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<UrlSerializer, never>;
property ɵprov
static ɵprov: i0.ɵɵInjectableDeclaration<UrlSerializer>;
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'}}
constructor
constructor(root?: UrlSegmentGroup, queryParams?: Params, fragment?: string);
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 returnsfalse
, navigation is cancelled. If any guard returns aUrlTree
, the current navigation is cancelled and a new navigation begins to theUrlTree
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(): boolean {return true;}}@Injectable()class CanActivateTeam implements CanActivate {constructor(private permissions: Permissions, private currentUser: UserToken) {}canActivate(route: ActivatedRouteSnapshot,state: RouterStateSnapshot): MaybeAsync<GuardResult> {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 {}
method canActivate
canActivate: ( route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => MaybeAsync<GuardResult>;
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 returnsfalse
, navigation is cancelled. If any guard returns aUrlTree
, current navigation is cancelled and a new navigation begins to theUrlTree
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): MaybeAsync<GuardResult> {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 {}
method canActivateChild
canActivateChild: ( childRoute: ActivatedRouteSnapshot, state: RouterStateSnapshot) => MaybeAsync<GuardResult>;
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 returnsfalse
, navigation is cancelled. If any guard returns aUrlTree
, current navigation is cancelled and a new navigation begins to theUrlTree
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): MaybeAsync<GuardResult> {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 {}
method canDeactivate
canDeactivate: ( component: T, currentRoute: ActivatedRouteSnapshot, currentState: RouterStateSnapshot, nextState: RouterStateSnapshot) => MaybeAsync<GuardResult>;
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 returnsfalse
, navigation is cancelled. If any guard returns aUrlTree
, current navigation is cancelled and a new navigation starts to theUrlTree
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 {}Deprecated
Use CanMatch instead
method canLoad
canLoad: (route: Route, segments: UrlSegment[]) => MaybeAsync<GuardResult>;
interface CanMatch
interface CanMatch {}
Interface that a class can implement to be a guard deciding if a
Route
can be matched. If all guards returntrue
, navigation continues and theRouter
will use theRoute
during activation. If any guard returnsfalse
, theRoute
is skipped for matching and otherRoute
configurations are processed instead.The following example implements a
CanMatch
function that decides whether the current user has permission to access the users page.class UserToken {}class Permissions {canAccess(user: UserToken, route: Route, segments: UrlSegment[]): boolean {return true;}}@Injectable()class CanMatchTeamSection implements CanMatch {constructor(private permissions: Permissions, private currentUser: UserToken) {}canMatch(route: Route, segments: UrlSegment[]): Observable<boolean>|Promise<boolean>|boolean {return this.permissions.canAccess(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),canMatch: [CanMatchTeamSection]},{path: '**',component: NotFoundComponent}])],providers: [CanMatchTeamSection, UserToken, Permissions]})class AppModule {}If the
CanMatchTeamSection
were to returnfalse
, the router would continue navigating to theteam/:id
URL, but would load theNotFoundComponent
because theRoute
for'team/:id'
could not be used for a URL match but the catch-all**
Route
did instead.
method canMatch
canMatch: (route: Route, segments: UrlSegment[]) => MaybeAsync<GuardResult>;
interface DefaultExport
interface DefaultExport<T> {}
An ES Module object with a default export of the given type.
See Also
property default
default: T;
Default exports are bound under the name
"default"
, per the ES Module spec: https://tc39.es/ecma262/#table-export-forms-mapping-to-exportentry-records
interface ExtraOptions
interface ExtraOptions extends InMemoryScrollingOptions, RouterConfigOptions {}
A set of configuration options for a router module, provided in the
forRoot()
method.See Also
property bindToComponentInputs
bindToComponentInputs?: boolean;
When true, enables binding information from the
Router
state directly to the inputs of the component inRoute
configurations.
property enableTracing
enableTracing?: boolean;
When true, log all internal navigation events to the console. Use for debugging.
property enableViewTransitions
enableViewTransitions?: boolean;
When true, enables view transitions in the Router by running the route activation and deactivation inside of
document.startViewTransition
.See Also
https://developer.chrome.com/docs/web-platform/view-transitions/
https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API
Modifiers
@experimental
property errorHandler
errorHandler?: (error: any) => RedirectCommand | any;
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.
See Also
RouterConfigOptions
property initialNavigation
initialNavigation?: InitialNavigation;
One of
enabled
,enabledBlocking
,enabledNonBlocking
ordisabled
. When set toenabled
orenabledBlocking
, the initial navigation starts before the root component is created. The bootstrap is blocked until the initial navigation is complete. This value should be set in case you use [server-side rendering](guide/ssr), but do not enable [hydration](guide/hydration) for your application. When set toenabledNonBlocking
, 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 todisabled
, 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 preloadingStrategy
preloadingStrategy?: any;
Configures a preloading strategy. One of
PreloadAllModules
orNoPreloading
(the default).
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 useHash
useHash?: boolean;
When true, enable the location strategy that uses the URL fragment instead of the history API.
interface InMemoryScrollingOptions
interface InMemoryScrollingOptions {}
Configuration options for the scrolling feature which can be used with
withInMemoryScrolling
function.
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 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 scrollchangeDetectorRef.detectChanges();if (e.position) {viewportScroller.scrollToPosition(e.position);}});});}}
interface IsActiveMatchOptions
interface IsActiveMatchOptions {}
A set of options which specify how to determine if a
UrlTree
is active, given theUrlTree
for the current router state.See Also
property fragment
fragment: 'exact' | 'ignored';
-
'exact'
: indicates that theUrlTree
fragments must be equal. -'ignored'
: the fragments will not be compared when determining if aUrlTree
is active.
property matrixParams
matrixParams: 'exact' | 'subset' | 'ignored';
Defines the strategy for comparing the matrix parameters of two
UrlTree
s.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 activeUrlTree
may contain extra matrix parameters, but those that exist in theUrlTree
in question must match. -'ignored'
: When comparingUrlTree
s, matrix params will be ignored.
property paths
paths: 'exact' | 'subset';
Defines the strategy for comparing the
UrlSegment
s of theUrlTree
s.-
'exact'
: all segments in eachUrlTree
must match. -'subset'
: aUrlTree
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 theUrlTree
in question.
property queryParams
queryParams: 'exact' | 'subset' | 'ignored';
Defines the strategy for comparing the query parameters of two
UrlTree
s.-
'exact'
: the query parameters must match exactly. -'subset'
: the activeUrlTree
may contain extra parameters, but must match the key and value of any that exist in theUrlTree
in question. -'ignored'
: When comparingUrlTree
s, query params will be ignored.
interface Navigation
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 withUrlSerializer.extract()
. * *finalUrl* : The extracted URL after redirects have been applied. This URL may not be available immediately, therefore this property can beundefined
. It is guaranteed to be set after theRoutesRecognized
event fires. * *trigger* : Identifies how this navigation was triggered. -- 'imperative'--Triggered byrouter.navigateByUrl
orrouter.navigate
. -- 'popstate'--Triggered by a popstate event. -- 'hashchange'--Triggered by a hashchange event. * *extras* : ANavigationExtras
options object that controlled the strategy used for this navigation. * *previousNavigation* : The previously successfulNavigation
object. Only one previous navigation is available, therefore this previousNavigation
object has anull
value for its ownpreviousNavigation
.
property extractedUrl
extractedUrl: UrlTree;
The initial target URL after being parsed with
UrlHandlingStrategy.extract()
.
property extras
extras: NavigationExtras;
Options that controlled the strategy used for this navigation. See
NavigationExtras
.
property finalUrl
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 theRoutesRecognized
event fires.
property id
id: number;
The unique identifier of the current navigation.
property initialUrl
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.
property previousNavigation
previousNavigation: Navigation | null;
The previously successful
Navigation
object. Only one previous navigation is available, therefore this previousNavigation
object has anull
value for its ownpreviousNavigation
.
property trigger
trigger: 'imperative' | 'popstate' | 'hashchange';
Identifies how this navigation was triggered.
* 'imperative'--Triggered by
router.navigateByUrl
orrouter.navigate
. * 'popstate'--Triggered by a popstate event. * 'hashchange'--Triggered by a hashchange event.
interface NavigationBehaviorOptions
interface NavigationBehaviorOptions {}
Options that modify the
Router
navigation strategy. Supply an object containing any of these properties to aRouter
navigation function to control how the navigation should be handled.See Also
[Routing and Navigation guide](guide/routing/common-router-tasks)
property browserUrl
readonly browserUrl?: UrlTree | string;
When set, the Router will update the browser's address bar to match the given
UrlTree
instead of the one used for route matching.This feature is useful for redirects, such as redirecting to an error page, without changing the value that will be displayed in the browser's address bar.
const canActivate: CanActivateFn = (route: ActivatedRouteSnapshot) => {const userService = inject(UserService);const router = inject(Router);if (!userService.isLoggedIn()) {const targetOfCurrentNavigation = router.getCurrentNavigation()?.finalUrl;const redirect = router.parseUrl('/404');return new RedirectCommand(redirect, {browserUrl: targetOfCurrentNavigation});}return true;};This value is used directly, without considering any
UrlHandingStrategy
. In this way,browserUrl
can also be used to use a different value for the browser URL than what would have been produced by from the navigation due toUrlHandlingStrategy.merge
.This value only affects the path presented in the browser's address bar. It does not apply to the internal
Router
state. Information such asparams
anddata
will match the internal state used to match routes which will be different from the browser URL when using this feature The same is true when using other APIs that cause the browser URL the differ from the Router state, such asskipLocationChange
.
property info
readonly info?: unknown;
Use this to convey transient information about this particular navigation, such as how it happened. In this way, it's different from the persisted value
state
that will be set tohistory.state
. This object is assigned directly to the Router's currentNavigation
(it is not copied or cloned), so it should be mutated with caution.One example of how this might be used is to trigger different single-page navigation animations depending on how a certain route was reached. For example, consider a photo gallery app, where you can reach the same photo URL and state via various routes:
- Clicking on it in a gallery view - Clicking - "next" or "previous" when viewing another photo in the album - Etc.
Each of these wants a different animation at navigate time. This information doesn't make sense to store in the persistent URL or history entry state, but it's still important to communicate from the rest of the application, into the router.
This information could be used in coordination with the View Transitions feature and the
onViewTransitionCreated
callback. The information might be used in the callback to set classes on the document in order to control the transition animations and remove the classes when the transition has finished animating.
property onSameUrlNavigation
onSameUrlNavigation?: OnSameUrlNavigation;
How to handle a navigation request to the current URL.
This value is a subset of the options available in
OnSameUrlNavigation
and will take precedence over the default value set for theRouter
.See Also
property replaceUrl
replaceUrl?: boolean;
When true, navigates while replacing the current state in history.
// Navigate to /viewthis.router.navigate(['/view'], { replaceUrl: true });
property skipLocationChange
skipLocationChange?: boolean;
When true, navigates without pushing a new state into history.
// Navigate silently to /viewthis.router.navigate(['/view'], { skipLocationChange: true });
property state
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
tohistory.state
. The value is written whenlocation.go()
orlocation.replaceState()
is called before activating this route.Note that
history.state
does not pass an object equality test because the router adds thenavigationId
on each navigation.
interface NavigationExtras
interface NavigationExtras extends UrlCreationOptions, NavigationBehaviorOptions {}
Options that modify the
Router
navigation strategy. Supply an object containing any of these properties to aRouter
navigation function to control how the target URL should be constructed or interpreted.See Also
[Routing and Navigation guide](guide/routing/common-router-tasks)
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 withgetAll()
.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 theResolveStart
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 theRoute
object in the router configuration:@NgModule({imports: [RouterModule.forRoot([{path: 'detail/:id',component: HeroDetailComponent,resolve: {hero: HeroResolver}}])],exports: [RouterModule]})export class AppRoutingModule {}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.
See Also
method resolve
resolve: ( route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => MaybeAsync<T | RedirectCommand>;
interface Route
interface Route {}
A configuration object that defines a single route. A set of routes are collected in a
Routes
array to define aRouter
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/routing/common-router-tasks).
### 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: Chatoutlet: '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', //defaultredirectTo: '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 theRoute
object, instead of thechildren
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?: Array<CanActivateFn | DeprecatedGuard>;
An array of
CanActivateFn
or DI tokens used to look upCanActivate()
handlers, in order to determine if the current user is allowed to activate the component. By default, any user can activate.When using a function rather than DI tokens, the function can call
inject
to get any required dependencies. Thisinject
call must be done in a synchronous context.
property canActivateChild
canActivateChild?: Array<CanActivateChildFn | DeprecatedGuard>;
An array of
CanActivateChildFn
or DI tokens used to look upCanActivateChild()
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.When using a function rather than DI tokens, the function can call
inject
to get any required dependencies. Thisinject
call must be done in a synchronous context.
property canDeactivate
canDeactivate?: Array<CanDeactivateFn<any> | DeprecatedGuard>;
An array of
CanDeactivateFn
or DI tokens used to look upCanDeactivate()
handlers, in order to determine if the current user is allowed to deactivate the component. By default, any user can deactivate.When using a function rather than DI tokens, the function can call
inject
to get any required dependencies. Thisinject
call must be done in a synchronous context.
property canLoad
canLoad?: Array<CanLoadFn | DeprecatedGuard>;
An array of
CanLoadFn
or DI tokens used to look upCanLoad()
handlers, in order to determine if the current user is allowed to load the component. By default, any user can load.When using a function rather than DI tokens, the function can call
inject
to get any required dependencies. Thisinject
call must be done in a synchronous context.Deprecated
Use
canMatch
instead
property canMatch
canMatch?: Array<CanMatchFn | DeprecatedGuard>;
An array of
CanMatchFn
or DI tokens used to look upCanMatch()
handlers, in order to determine if the current user is allowed to match theRoute
. By default, any route can match.When using a function rather than DI tokens, the function can call
inject
to get any required dependencies. Thisinject
call must be done in a synchronous context.
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> | DefaultExport<Type<unknown>>> | Promise<Type<unknown> | DefaultExport<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 | EnvironmentProviders>;
A
Provider
array to use for thisRoute
and itschildren
.The
Router
will create a newEnvironmentInjector
for thisRoute
and use it for thisRoute
and itschildren
. If this route also has aloadChildren
function which returns anNgModuleRef
, this injector will be used as the parent of the lazy loaded module.
property redirectTo
redirectTo?: string | RedirectFunction;
A URL or function that returns a URL to redirect to when the path matches.
Absolute if the URL begins with a slash (/) or the function returns a
UrlTree
, otherwise relative to the path URL.The
RedirectFunction
is run in an injection context so it can callinject
to get any required dependencies.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;
A policy for when to run guards and resolvers on a route.
Guards and/or resolvers will always run when a route is activated or deactivated. When a route is unchanged, the default behavior is the same as
paramsChange
.paramsChange
: Rerun the guards and resolvers when path or path param changes. This does not include query parameters. This option is the default. -always
: Run on every execution. -pathParamsChange
: Rerun guards and resolvers when the path params change. This does not compare matrix or query parameters. -paramsOrQueryParamsChange
: Run when path, matrix, or query parameters change. -pathParamsOrQueryParamsChange
: Rerun guards and resolvers when the path params change or query params have changed. This does not include matrix parameters.See Also
property title
title?: string | Type<Resolve<string>> | ResolveFn<string>;
Used to define a page title for the route. This can be a static string or an
Injectable
that implementsResolve
.See Also
interface RouterConfigOptions
interface RouterConfigOptions {}
Extra configuration options that can be used with the
withRouterConfig
function.
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 withurlUpdateStrategy: '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 defaultQueryParamsHandling
defaultQueryParamsHandling?: QueryParamsHandling;
The default strategy to use for handling query params in
Router.createUrlTree
when one is not provided.The
createUrlTree
method is used internally byRouter.navigate
andRouterLink
. Note thatQueryParamsHandling
does not apply toRouter.navigateByUrl
.When neither the default nor the queryParamsHandling option is specified in the call to
createUrlTree
, the current parameters will be replaced by new parameters.See Also
property onSameUrlNavigation
onSameUrlNavigation?: OnSameUrlNavigation;
Configures the default for handling a navigation request to the current URL.
If unset, the
Router
will use'ignore'
.See Also
property paramsInheritanceStrategy
paramsInheritanceStrategy?: 'emptyOnly' | 'always';
Defines how the router merges parameters, data, and resolved data from parent to child routes.
By default ('emptyOnly'), a route inherits the parent route's parameters when the route itself has an empty path (meaning its configured with path: '') or when the parent route doesn't have any component set.
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 theRoute
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 asa/b;foo=bar
and nota;foo=bar/b
.
property resolveNavigationPromiseOnError
resolveNavigationPromiseOnError?: boolean;
When
true
, thePromise
will instead resolve withfalse
, as it does with other failed navigations (for example, when guards are rejected).Otherwise the
Promise
returned by the Router's navigation with be rejected if an error occurs.
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.
interface RouterFeature
interface RouterFeature<FeatureKind extends RouterFeatureKind> {}
Helper type to represent a Router feature.
property ɵkind
ɵkind: FeatureKind;
property ɵproviders
ɵproviders: Provider[];
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
viaChildrenOutletContexts#onChildOutletCreated
and unregister withChildrenOutletContexts#onChildOutletDestroyed
. When theRouter
identifies a matchedRoute
, it looks for a registered outlet in theChildrenOutletContexts
and activates it.See Also
property activatedRoute
activatedRoute: ActivatedRoute | null;
The
ActivatedRoute
for the outlet ornull
if the outlet is not activated.
property activatedRouteData
activatedRouteData: Data;
The
Data
of theActivatedRoute
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.
property supportsBindingToComponentInputs
readonly supportsBindingToComponentInputs?: true;
Used to indicate that the outlet is able to bind data from the
Router
to the outlet component's inputs.When this is
undefined
orfalse
and the developer has opted in to the feature usingwithComponentInputBinding
, a warning will be logged in dev mode if this outlet is used in the application.
method activateWith
activateWith: ( activatedRoute: ActivatedRoute, environmentInjector: EnvironmentInjector) => void;
Called by the
Router
when the outlet should activate (create a component).
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 anActivatedRoute
should be removed but stored for later re-use rather than destroyed, theRouter
will calldetach
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 theattach
method.
interface UrlCreationOptions
interface UrlCreationOptions {}
Options that modify the
Router
URL. Supply an object containing any of these properties to aRouter
navigation function to control how the target URL should be constructed.See Also
[Routing and Navigation guide](guide/routing/common-router-tasks)
property fragment
fragment?: string;
Sets the hash fragment for the URL.
// Navigate to /results#toprouter.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#toprouter.navigate(['/view'], { preserveFragment: true });
property queryParams
queryParams?: Params | null;
Sets query parameters to the URL.
// Navigate to /results?page=1router.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=1router.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=2router.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 thelist
route by interpreting the destination URI as relative to the activatedchild
route@Component({...})class ChildComponent {constructor(private router: Router, private route: ActivatedRoute) {}go() {router.navigate(['../list'], { relativeTo: this.route });}}A value of
null
orundefined
indicates that the navigation commands should be applied relative to the root.
interface ViewTransitionInfo
interface ViewTransitionInfo {}
The information passed to the
onViewTransitionCreated
function provided in thewithViewTransitions
feature options.Modifiers
@experimental
property from
from: ActivatedRouteSnapshot;
The
ActivatedRouteSnapshot
that the navigation is transitioning from.
property to
to: ActivatedRouteSnapshot;
The
ActivatedRouteSnapshot
that the navigation is transitioning to.
property transition
transition: { /** * @see https://developer.mozilla.org/en-US/docs/Web/API/ViewTransition/finished */ finished: Promise<void>; /** * @see https://developer.mozilla.org/en-US/docs/Web/API/ViewTransition/ready */ ready: Promise<void>; /** * @see https://developer.mozilla.org/en-US/docs/Web/API/ViewTransition/updateCallbackDone */ updateCallbackDone: Promise<void>; /** * @see https://developer.mozilla.org/en-US/docs/Web/API/ViewTransition/skipTransition */ skipTransition(): void;};
The
ViewTransition
returned by the call tostartViewTransition
.See Also
https://developer.mozilla.org/en-US/docs/Web/API/ViewTransition
interface ViewTransitionsFeatureOptions
interface ViewTransitionsFeatureOptions {}
Options to configure the View Transitions integration in the Router.
See Also
withViewTransitions
Modifiers
@experimental
property onViewTransitionCreated
onViewTransitionCreated?: (transitionInfo: ViewTransitionInfo) => void;
A function to run after the
ViewTransition
is created.This function is run in an injection context and can use
inject
.
property skipInitialTransition
skipInitialTransition?: boolean;
Skips the very first call to
startViewTransition
. This can be useful for disabling the animation during the application's initial loading phase.
Enums
enum EventType
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, NavigationSkipped = 16,}
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 NavigationSkipped
NavigationSkipped = 16
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
enum NavigationCancellationCode
enum NavigationCancellationCode { Redirect = 0, SupersededByNewNavigation = 1, NoDataFromResolver = 2, GuardRejected = 3,}
A code for the
NavigationCancel
event of theRouter
to indicate the reason a navigation failed.
member GuardRejected
GuardRejected = 3
A navigation failed because a guard returned
false
.
member NoDataFromResolver
NoDataFromResolver = 2
A navigation failed because one of the resolvers completed without emitting a value.
member Redirect
Redirect = 0
A navigation failed because a guard returned a
UrlTree
to redirect.
member SupersededByNewNavigation
SupersededByNewNavigation = 1
A navigation failed because a more recent navigation started.
enum NavigationSkippedCode
enum NavigationSkippedCode { IgnoredSameUrlNavigation = 0, IgnoredByUrlHandlingStrategy = 1,}
A code for the
NavigationSkipped
event of theRouter
to indicate the reason a navigation was skipped.
member IgnoredByUrlHandlingStrategy
IgnoredByUrlHandlingStrategy = 1
A navigation was skipped because the configured
UrlHandlingStrategy
returnfalse
for both the current Router URL and the target of the navigation.See Also
member IgnoredSameUrlNavigation
IgnoredSameUrlNavigation = 0
A navigation was skipped because the navigation URL was the same as the current Router URL.
Type Aliases
type CanActivateChildFn
type CanActivateChildFn = ( childRoute: ActivatedRouteSnapshot, state: RouterStateSnapshot) => MaybeAsync<GuardResult>;
The signature of a function used as a
canActivateChild
guard on aRoute
.If all guards return
true
, navigation continues. If any guard returnsfalse
, navigation is cancelled. If any guard returns aUrlTree
, the current navigation is cancelled and a new navigation begins to theUrlTree
returned from the guard.The following example implements a
canActivate
function that checks whether the current user has permission to activate the requested route.See Also
type CanActivateFn
type CanActivateFn = ( route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => MaybeAsync<GuardResult>;
The signature of a function used as a
canActivate
guard on aRoute
.If all guards return
true
, navigation continues. If any guard returnsfalse
, navigation is cancelled. If any guard returns aUrlTree
, the current navigation is cancelled and a new navigation begins to theUrlTree
returned from the guard.The following example implements and uses a
CanActivateFn
that checks whether the current user has permission to activate the requested route.@Injectable()class UserToken {}@Injectable()class PermissionsService {canActivate(currentUser: UserToken, userId: string): boolean {return true;}canMatch(currentUser: UserToken): boolean {return true;}}const canActivateTeam: CanActivateFn = (route: ActivatedRouteSnapshot,state: RouterStateSnapshot,) => {return inject(PermissionsService).canActivate(inject(UserToken), route.params['id']);};Here, the defined guard function is provided as part of the
Route
object in the router configuration:bootstrapApplication(App, {providers: [provideRouter([{path: 'team/:id',component: TeamComponent,canActivate: [canActivateTeam],},]),],});See Also
type CanDeactivateFn
type CanDeactivateFn<T> = ( component: T, currentRoute: ActivatedRouteSnapshot, currentState: RouterStateSnapshot, nextState: RouterStateSnapshot) => MaybeAsync<GuardResult>;
The signature of a function used as a
canDeactivate
guard on aRoute
.If all guards return
true
, navigation continues. If any guard returnsfalse
, navigation is cancelled. If any guard returns aUrlTree
, the current navigation is cancelled and a new navigation begins to theUrlTree
returned from the guard.The following example implements and uses a
CanDeactivateFn
that checks whether the user component has unsaved changes before navigating away from the route.See Also
type CanLoadFn
type CanLoadFn = (route: Route, segments: UrlSegment[]) => MaybeAsync<GuardResult>;
type CanMatchFn
type CanMatchFn = (route: Route, segments: UrlSegment[]) => MaybeAsync<GuardResult>;
The signature of a function used as a
canMatch
guard on aRoute
.If all guards return
true
, navigation continues and theRouter
will use theRoute
during activation. If any guard returnsfalse
, theRoute
is skipped for matching and otherRoute
configurations are processed instead.The following example implements and uses a
CanMatchFn
that checks whether the current user has permission to access the team page.Parameter route
The route configuration.
Parameter segments
The URL segments that have not been consumed by previous parent route evaluations.
See Also
type ComponentInputBindingFeature
type ComponentInputBindingFeature = RouterFeature<RouterFeatureKind.ComponentInputBindingFeature>;
A type alias for providers returned by
withComponentInputBinding
for use withprovideRouter
.See Also
type Data
type Data = { [key: string | symbol]: any;};
Represents static data associated with a particular route.
See Also
type DebugTracingFeature
type DebugTracingFeature = RouterFeature<RouterFeatureKind.DebugTracingFeature>;
A type alias for providers returned by
withDebugTracing
for use withprovideRouter
.See Also
type DeprecatedGuard
type DeprecatedGuard = ProviderToken<any> | any;
The
InjectionToken
and@Injectable
classes for guards and resolvers are deprecated in favor of plain JavaScript functions instead. Dependency injection can still be achieved using the [inject
](api/core/inject) function from@angular/core
and an injectable class can be used as a functional guard using [inject
](api/core/inject): `canActivate: [() => inject(myGuard).canActivate()]`.See Also
Deprecated
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 DisabledInitialNavigationFeature
type DisabledInitialNavigationFeature = RouterFeature<RouterFeatureKind.DisabledInitialNavigationFeature>;
A type alias for providers returned by
withDisabledInitialNavigation
for use withprovideRouter
.See Also
type EnabledBlockingInitialNavigationFeature
type EnabledBlockingInitialNavigationFeature = RouterFeature<RouterFeatureKind.EnabledBlockingInitialNavigationFeature>;
A type alias for providers returned by
withEnabledBlockingInitialNavigation
for use withprovideRouter
.See Also
type Event
type Event_2 = | NavigationStart | NavigationEnd | NavigationCancel | NavigationError | RoutesRecognized | GuardsCheckStart | GuardsCheckEnd | RouteConfigLoadStart | RouteConfigLoadEnd | ChildActivationStart | ChildActivationEnd | ActivationStart | ActivationEnd | Scroll | ResolveStart | ResolveEnd | NavigationSkipped;
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/routing/common-router-tasks#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 GuardResult
type GuardResult = boolean | UrlTree | RedirectCommand;
The supported types that can be returned from a
Router
guard.See Also
[Routing guide](guide/routing/common-router-tasks#preventing-unauthorized-access)
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 should be set in case you use [server-side rendering](guide/ssr), but do not enable [hydration](guide/hydration) for your application. * '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.
See Also
type InitialNavigationFeature
type InitialNavigationFeature = | EnabledBlockingInitialNavigationFeature | DisabledInitialNavigationFeature;
A type alias for providers returned by
withEnabledBlockingInitialNavigation
orwithDisabledInitialNavigation
functions for use withprovideRouter
.See Also
type InMemoryScrollingFeature
type InMemoryScrollingFeature = RouterFeature<RouterFeatureKind.InMemoryScrollingFeature>;
A type alias for providers returned by
withInMemoryScrolling
for use withprovideRouter
.See Also
type LoadChildren
type LoadChildren = LoadChildrenCallback;
A function that returns a set of routes to load.
See Also
type LoadChildrenCallback
type LoadChildrenCallback = () => | Type<any> | NgModuleFactory<any> | Routes | Observable< Type<any> | Routes | DefaultExport<Type<any>> | DefaultExport<Routes> > | Promise< | NgModuleFactory<any> | Type<any> | Routes | DefaultExport<Type<any>> | DefaultExport<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),}];If the lazy-loaded routes are exported via a
default
export, the.then
can be omitted:[{path: 'lazy',loadChildren: () => import('./lazy-route/lazy.routes'),}];See Also
type MaybeAsync
type MaybeAsync<T> = T | Observable<T> | Promise<T>;
Type used to represent a value which may be synchronous or async.
type NavigationErrorHandlerFeature
type NavigationErrorHandlerFeature = RouterFeature<RouterFeatureKind.NavigationErrorHandlerFeature>;
A type alias for providers returned by
withNavigationErrorHandler
for use withprovideRouter
.See Also
type OnSameUrlNavigation
type OnSameUrlNavigation = 'reload' | 'ignore';
How to handle a navigation request to the current URL. One of:
-
'ignore'
: The router ignores the request if it is the same as the current state. -'reload'
: The router processes the URL even if it is not different from the current state. One example of when you might want to use this option is if acanMatch
guard depends on the application state and initially rejects navigation to a route. After fixing the state, you want to re-navigate to the same URL so that the route with thecanMatch
guard can activate.Note that this only configures whether or not the Route reprocesses the URL and triggers related actions 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 setonSameUrlNavigation
to'reload'
_and_ provide aRouteReuseStrategy
which returnsfalse
forshouldReuseRoute
. Additionally, resolvers and most guards for routes do not run unless the path or path params have changed (configured byrunGuardsAndResolvers
).See Also
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
type PreloadingFeature
type PreloadingFeature = RouterFeature<RouterFeatureKind.PreloadingFeature>;
A type alias that represents a feature which enables preloading in Router. The type is used to describe the return value of the
withPreloading
function.See Also
type QueryParamsHandling
type QueryParamsHandling = 'merge' | 'preserve' | 'replace' | '';
How to handle query parameters in a router link. One of: -
"merge"
: Merge new parameters with current parameters. -"preserve"
: Preserve current parameters. -"replace"
: Replace current parameters with new parameters. This is the default behavior. -""
: For legacy reasons, the same as'replace'
.See Also
type RedirectFunction
type RedirectFunction = ( redirectData: Pick< ActivatedRouteSnapshot, | 'routeConfig' | 'url' | 'params' | 'queryParams' | 'fragment' | 'data' | 'outlet' | 'title' >) => string | UrlTree;
The type for the function that can be used to handle redirects when the path matches a
Route
config.The
RedirectFunction
does have access to the fullActivatedRouteSnapshot
interface. Some data are not accurately known at the route matching phase. For example, resolvers are not run until later, so any resolved title would not be populated. The same goes for lazy loaded components. This is also true for all the snapshots up to the root, so properties that include parents (root, parent, pathFromRoot) are also excluded. And naturally, the full route matching hasn't yet happened so firstChild and children are not available either.See Also
type ResolveData
type ResolveData = { [key: string | symbol]: ResolveFn<unknown> | DeprecatedGuard;};
Represents the resolved data associated with a particular route.
Returning a
RedirectCommand
directs the router to cancel the current navigation and redirect to the location provided in theRedirectCommand
. Note that there are no ordering guarantees when resolvers execute. If multiple resolvers would return aRedirectCommand
, only the first one returned will be used.See Also
type ResolveFn
type ResolveFn<T> = ( route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => MaybeAsync<T | RedirectCommand>;
Function type definition for a data provider.
A data provider can be used with the router to resolve data during navigation. The router waits for the data to be resolved before the route is finally activated.
A resolver can also redirect a
RedirectCommand
and the Angular router will use it to redirect the current navigation to the new destination.The following example implements a function that retrieves the data needed to activate the requested route.
interface Hero {name: string;}@Injectable()export class HeroService {getHero(id: string) {return {name: `Superman-${id}`};}}export const heroResolver: ResolveFn<Hero> = (route: ActivatedRouteSnapshot,state: RouterStateSnapshot,) => {return inject(HeroService).getHero(route.paramMap.get('id')!);};bootstrapApplication(App, {providers: [provideRouter([{path: 'detail/:id',component: HeroDetailComponent,resolve: {hero: heroResolver},},]),],});And you can access to your resolved data from
HeroComponent
:@Component({template: ''})export class HeroDetailComponent {private activatedRoute = inject(ActivatedRoute);ngOnInit() {this.activatedRoute.data.subscribe(({hero}) => {// do something with your resolved data ...});}}If resolved data cannot be retrieved, you may want to redirect the user to a new page instead:
export const heroResolver: ResolveFn<Hero> = async (route: ActivatedRouteSnapshot,state: RouterStateSnapshot,) => {const router = inject(Router);const heroService = inject(HeroService);try {return await heroService.getHero(route.paramMap.get('id')!);} catch {return new RedirectCommand(router.parseUrl('/404'));}};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',canActivate: [childGuard],component: ChildComponent,resolve: {childData: childDataResolver}}]}The order of execution is: baseGuard, childGuard, baseDataResolver, childDataResolver.
See Also
type RouterConfigurationFeature
type RouterConfigurationFeature = RouterFeature<RouterFeatureKind.RouterConfigurationFeature>;
A type alias for providers returned by
withRouterConfig
for use withprovideRouter
.See Also
type RouterFeatures
type RouterFeatures = | PreloadingFeature | DebugTracingFeature | InitialNavigationFeature | InMemoryScrollingFeature | RouterConfigurationFeature | NavigationErrorHandlerFeature | ComponentInputBindingFeature | ViewTransitionsFeature | RouterHashLocationFeature;
A type alias that represents all Router features available for use with
provideRouter
. Features can be enabled by adding special functions to theprovideRouter
call. See documentation for each symbol to find corresponding function name. See alsoprovideRouter
documentation on how to use those functions.See Also
type RouterHashLocationFeature
type RouterHashLocationFeature = RouterFeature<RouterFeatureKind.RouterHashLocationFeature>;
A type alias for providers returned by
withHashLocation
for use withprovideRouter
.See Also
type Routes
type Routes = Route[];
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.
Guards and/or resolvers will always run when a route is activated or deactivated. When a route is unchanged, the default behavior is the same as
paramsChange
.paramsChange
: Rerun the guards and resolvers when path or path param changes. This does not include query parameters. This option is the default. -always
: Run on every execution. -pathParamsChange
: Rerun guards and resolvers when the path params change. This does not compare matrix or query parameters. -paramsOrQueryParamsChange
: Run when path, matrix, or query parameters change. -pathParamsOrQueryParamsChange
: Rerun guards and resolvers when the path params change or query params have changed. This does not include matrix parameters.See Also
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 ofpath
andpathMatch
is not expressive enough. Cannot be used together withpath
andpathMatch
.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
type ViewTransitionsFeature
type ViewTransitionsFeature = RouterFeature<RouterFeatureKind.ViewTransitionsFeature>;
A type alias for providers returned by
withViewTransitions
for use withprovideRouter
.See Also
Namespaces
namespace i1
namespace i1 {}
variable INPUT_BINDER
const INPUT_BINDER: InjectionToken<RoutedComponentInputBinder>;
variable ROUTER_OUTLET_DATA
const ROUTER_OUTLET_DATA: InjectionToken<Signal<unknown>>;
An
InjectionToken
provided by theRouterOutlet
and can be set using therouterOutletData
input.When unset, this value is
null
by default.To set the data from the template of the component with
router-outlet
:<router-outlet [routerOutletData]="{name: 'Angular'}" />To read the data in the routed component:
data = inject(ROUTER_OUTLET_DATA) as Signal<{name: string}>;
class RoutedComponentInputBinder
class RoutedComponentInputBinder {}
Injectable used as a tree-shakable provider for opting in to binding router data to component inputs.
The RouterOutlet registers itself with this service when an
ActivatedRoute
is attached or activated. When this happens, the service subscribes to theActivatedRoute
observables (params, queryParams, data) and sets the inputs of the component usingComponentRef.setInput
. Importantly, when an input does not have an item in the route data with a matching key, this input is set toundefined
. If it were not done this way, the previous information would be retained if the data got removed from the route (i.e. if a query parameter is removed).The
RouterOutlet
should unregister itself when destroyed viaunsubscribeFromRouteData
so that the subscriptions are cleaned up.
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<RoutedComponentInputBinder, never>;
property ɵprov
static ɵprov: i0.ɵɵInjectableDeclaration<RoutedComponentInputBinder>;
method bindActivatedRouteToOutletComponent
bindActivatedRouteToOutletComponent: (outlet: RouterOutlet) => void;
method unsubscribeFromRouteData
unsubscribeFromRouteData: (outlet: RouterOutlet) => void;
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 anoutlet
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 theRouteReuseStrategy
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
Route RouterModule
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 name
name: string;
The name of the outlet
property ɵdir
static ɵdir: i0.ɵɵDirectiveDeclaration< RouterOutlet, 'router-outlet', ['outlet'], { name: { alias: 'name'; required: false }; routerOutletData: { alias: 'routerOutletData'; required: false; isSignal: true; }; }, { activateEvents: 'activate'; deactivateEvents: 'deactivate'; attachEvents: 'attach'; detachEvents: 'detach'; }, never, never, true, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<RouterOutlet, never>;
property routerOutletData
readonly routerOutletData: InputSignal<unknown>;
Data that will be provided to the child injector through the
ROUTER_OUTLET_DATA
token.When unset, the value of the token is
undefined
by default.
property supportsBindingToComponentInputs
readonly supportsBindingToComponentInputs: boolean;
method activateWith
activateWith: ( activatedRoute: ActivatedRoute, environmentInjector: EnvironmentInjector) => 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 ngOnChanges
ngOnChanges: (changes: SimpleChanges) => void;
method ngOnDestroy
ngOnDestroy: () => void;
method ngOnInit
ngOnInit: () => void;
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
viaChildrenOutletContexts#onChildOutletCreated
and unregister withChildrenOutletContexts#onChildOutletDestroyed
. When theRouter
identifies a matchedRoute
, it looks for a registered outlet in theChildrenOutletContexts
and activates it.See Also
property activatedRoute
activatedRoute: ActivatedRoute | null;
The
ActivatedRoute
for the outlet ornull
if the outlet is not activated.
property activatedRouteData
activatedRouteData: Data;
The
Data
of theActivatedRoute
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.
property supportsBindingToComponentInputs
readonly supportsBindingToComponentInputs?: true;
Used to indicate that the outlet is able to bind data from the
Router
to the outlet component's inputs.When this is
undefined
orfalse
and the developer has opted in to the feature usingwithComponentInputBinding
, a warning will be logged in dev mode if this outlet is used in the application.
method activateWith
activateWith: ( activatedRoute: ActivatedRoute, environmentInjector: EnvironmentInjector) => void;
Called by the
Router
when the outlet should activate (create a component).
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 anActivatedRoute
should be removed but stored for later re-use rather than destroyed, theRouter
will calldetach
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 theattach
method.
namespace i2
namespace i2 {}
class RouterLink
class RouterLink implements OnChanges, OnDestroy {}
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 Router#createUrlTree 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 givenqueryParams
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>queryParams
,fragment
,queryParamsHandling
,preserveFragment
, andrelativeTo
cannot be used when therouterLink
input is aUrlTree
.See UrlCreationOptions#queryParamsHandling.
### 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 Router#getCurrentNavigation to retrieve a saved navigation-state value. For example, to capture the
tracingId
during theNavigationStart
event:// Get NavigationStart eventsrouter.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, locationStrategy?: any);
property fragment
fragment?: string;
Passed to Router#createUrlTree as part of the
UrlCreationOptions
.See Also
property href
href: string;
Represents an
href
attribute value applied to a host element, when a host element is<a>
. For other tags, the value isnull
.
property info
info?: {};
Passed to Router#navigateByUrl as part of the
NavigationBehaviorOptions
.See Also
property ngAcceptInputType_preserveFragment
static ngAcceptInputType_preserveFragment: {};
property ngAcceptInputType_replaceUrl
static ngAcceptInputType_replaceUrl: {};
property ngAcceptInputType_skipLocationChange
static ngAcceptInputType_skipLocationChange: {};
property ɵdir
static ɵdir: i0.ɵɵDirectiveDeclaration< RouterLink, '[routerLink]', never, { target: { alias: 'target'; required: false }; queryParams: { alias: 'queryParams'; required: false }; fragment: { alias: 'fragment'; required: false }; queryParamsHandling: { alias: 'queryParamsHandling'; required: false }; state: { alias: 'state'; required: false }; info: { alias: 'info'; required: false }; relativeTo: { alias: 'relativeTo'; required: false }; preserveFragment: { alias: 'preserveFragment'; required: false }; skipLocationChange: { alias: 'skipLocationChange'; required: false }; replaceUrl: { alias: 'replaceUrl'; required: false }; routerLink: { alias: 'routerLink'; required: false }; }, {}, never, never, true, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration< RouterLink, [null, null, { attribute: 'tabindex' }, null, null, null]>;
property preserveFragment
preserveFragment: boolean;
Passed to Router#createUrlTree as part of the
UrlCreationOptions
.See Also
property queryParams
queryParams?: Params;
Passed to Router#createUrlTree as part of the
UrlCreationOptions
.See Also
property queryParamsHandling
queryParamsHandling?: QueryParamsHandling;
Passed to Router#createUrlTree as part of the
UrlCreationOptions
.See Also
property relativeTo
relativeTo?: ActivatedRoute;
Passed to Router#createUrlTree as part of the
UrlCreationOptions
. Specify a value here when you do not want to use the default value forrouterLink
, which is the current activated route. Note that a value ofundefined
here will use therouterLink
default.See Also
property replaceUrl
replaceUrl: boolean;
Passed to Router#navigateByUrl as part of the
NavigationBehaviorOptions
.See Also
property skipLocationChange
skipLocationChange: boolean;
Passed to Router#navigateByUrl as part of the
NavigationBehaviorOptions
.See Also
property state
state?: { [k: string]: any };
Passed to Router#navigateByUrl as part of the
NavigationBehaviorOptions
.See Also
property target
target?: string;
Represents the
target
attribute on a host element. This is only used when the host element is an<a>
tag.
property urlTree
readonly urlTree: UrlTree;
method ngOnChanges
ngOnChanges: (changes?: SimpleChanges) => void;
method ngOnDestroy
ngOnDestroy: () => any;
method onClick
onClick: ( button: number, ctrlKey: boolean, shiftKey: boolean, altKey: boolean, metaKey: boolean) => boolean;
class RouterLinkWithHref
class RouterLink implements OnChanges, OnDestroy {}
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 Router#createUrlTree 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 givenqueryParams
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>queryParams
,fragment
,queryParamsHandling
,preserveFragment
, andrelativeTo
cannot be used when therouterLink
input is aUrlTree
.See UrlCreationOptions#queryParamsHandling.
### 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 Router#getCurrentNavigation to retrieve a saved navigation-state value. For example, to capture the
tracingId
during theNavigationStart
event:// Get NavigationStart eventsrouter.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, locationStrategy?: any);
property fragment
fragment?: string;
Passed to Router#createUrlTree as part of the
UrlCreationOptions
.See Also
property href
href: string;
Represents an
href
attribute value applied to a host element, when a host element is<a>
. For other tags, the value isnull
.
property info
info?: {};
Passed to Router#navigateByUrl as part of the
NavigationBehaviorOptions
.See Also
property ngAcceptInputType_preserveFragment
static ngAcceptInputType_preserveFragment: {};
property ngAcceptInputType_replaceUrl
static ngAcceptInputType_replaceUrl: {};
property ngAcceptInputType_skipLocationChange
static ngAcceptInputType_skipLocationChange: {};
property ɵdir
static ɵdir: i0.ɵɵDirectiveDeclaration< RouterLink, '[routerLink]', never, { target: { alias: 'target'; required: false }; queryParams: { alias: 'queryParams'; required: false }; fragment: { alias: 'fragment'; required: false }; queryParamsHandling: { alias: 'queryParamsHandling'; required: false }; state: { alias: 'state'; required: false }; info: { alias: 'info'; required: false }; relativeTo: { alias: 'relativeTo'; required: false }; preserveFragment: { alias: 'preserveFragment'; required: false }; skipLocationChange: { alias: 'skipLocationChange'; required: false }; replaceUrl: { alias: 'replaceUrl'; required: false }; routerLink: { alias: 'routerLink'; required: false }; }, {}, never, never, true, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration< RouterLink, [null, null, { attribute: 'tabindex' }, null, null, null]>;
property preserveFragment
preserveFragment: boolean;
Passed to Router#createUrlTree as part of the
UrlCreationOptions
.See Also
property queryParams
queryParams?: Params;
Passed to Router#createUrlTree as part of the
UrlCreationOptions
.See Also
property queryParamsHandling
queryParamsHandling?: QueryParamsHandling;
Passed to Router#createUrlTree as part of the
UrlCreationOptions
.See Also
property relativeTo
relativeTo?: ActivatedRoute;
Passed to Router#createUrlTree as part of the
UrlCreationOptions
. Specify a value here when you do not want to use the default value forrouterLink
, which is the current activated route. Note that a value ofundefined
here will use therouterLink
default.See Also
property replaceUrl
replaceUrl: boolean;
Passed to Router#navigateByUrl as part of the
NavigationBehaviorOptions
.See Also
property skipLocationChange
skipLocationChange: boolean;
Passed to Router#navigateByUrl as part of the
NavigationBehaviorOptions
.See Also
property state
state?: { [k: string]: any };
Passed to Router#navigateByUrl as part of the
NavigationBehaviorOptions
.See Also
property target
target?: string;
Represents the
target
attribute on a host element. This is only used when the host element is an<a>
tag.
property urlTree
readonly urlTree: UrlTree;
method ngOnChanges
ngOnChanges: (changes?: SimpleChanges) => void;
method ngOnDestroy
ngOnDestroy: () => any;
method onClick
onClick: ( button: number, ctrlKey: boolean, shiftKey: boolean, altKey: boolean, metaKey: boolean) => boolean;
namespace i3
namespace i3 {}
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 theRouterLinkActive
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);
property ariaCurrentWhenActive
ariaCurrentWhenActive?: boolean | 'page' | 'step' | 'location' | 'date' | 'time';
Aria-current attribute to apply when the router link is active.
Possible values:
'page'
|'step'
|'location'
|'date'
|'time'
|true
|false
.See Also
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
<arouterLink="/user/bob"routerLinkActive="active-link"(isActiveChange)="this.onRouterLinkActive($event)">Bob</a>
property links
links: QueryList<RouterLink>;
property ɵdir
static ɵdir: i0.ɵɵDirectiveDeclaration< RouterLinkActive, '[routerLinkActive]', ['routerLinkActive'], { routerLinkActiveOptions: { alias: 'routerLinkActiveOptions'; required: false; }; ariaCurrentWhenActive: { alias: 'ariaCurrentWhenActive'; required: false; }; routerLinkActive: { alias: 'routerLinkActive'; required: false }; }, { isActiveChange: 'isActiveChange' }, ['links'], never, true, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration< RouterLinkActive, [null, null, null, null, { 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
method ngAfterContentInit
ngAfterContentInit: () => void;
method ngOnChanges
ngOnChanges: (changes: SimpleChanges) => void;
method ngOnDestroy
ngOnDestroy: () => void;
namespace i4
namespace i4 {}
function standardizeConfig
standardizeConfig: (r: Route) => Route;
Makes a copy of the config and adds any default required properties.
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
.
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
.
Package Files (1)
Dependencies (1)
Dev Dependencies (0)
No dev dependencies.
Peer Dependencies (4)
Badge
To add a badge like this oneto your package's README, use the codes available below.
You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@angular/router
.
- Markdown[](https://www.jsdocs.io/package/@angular/router)
- HTML<a href="https://www.jsdocs.io/package/@angular/router"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>
- Updated .
Package analyzed in 10885 ms. - Missing or incorrect documentation? Open an issue for this package.