Acts as a placeholder that Angular dynamically fills based on the current router state.

See more...

See also

• Routing tutorial.

• RouterLink

• Route

Exported from

• RouterModule

Selectors

• router-outlet

Properties

Property	Description
@Output('activate')activateEvents: EventEmitter<any>
@Output('deactivate')deactivateEvents: EventEmitter<any>
isActivated: boolean	Read-Only
component: Object	Read-Only
activatedRoute: ActivatedRoute	Read-Only
activatedRouteData: Data	Read-Only

Template variable references

Identifier	Usage
outlet	#myTemplateVar="outlet"

Description

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

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

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

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

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

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

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

A router outlet emits an activate event when a new component is instantiated, and a deactivate event when a component is destroyed.

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

Methods

detach()
Called when the RouteReuseStrategy instructs to detach the subtree
detach(): ComponentRef<any> Parameters There are no parameters. Returns ComponentRef<any>

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

deactivate()
deactivate(): void Parameters There are no parameters. Returns void

activateWith()
activateWith(activatedRoute: ActivatedRoute, resolver: ComponentFactoryResolver) Parameters activatedRoute ActivatedRoute resolver ComponentFactoryResolver