Cookies concent notice

This site uses cookies from Google to deliver its services and to analyze traffic.
Learn more
Skip to main content
This site is no longer updated.Head to Angular.devHome
/

This is the archived documentation for Angular v17. Please visit angular.dev to see this page for the current version of Angular.

RouterOutlet

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

See more...

See also

Exported from

Selectors

Properties

Property Description
@Input()
name: PRIMARY_OUTLET

The name of the outlet

See also:

@Output('activate')
activateEvents: EventEmitter<any>
@Output('deactivate')
deactivateEvents: EventEmitter<any>
@Output('attach')
attachEvents: EventEmitter<unknown>

Emits an attached component instance when the RouteReuseStrategy instructs to re-attach a previously detached subtree.

@Output('detach')
detachEvents: EventEmitter<unknown>

Emits a detached component instance when the RouteReuseStrategy instructs to detach the subtree.

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, deactivate event when a component is destroyed. An attached event emits when the RouteReuseStrategy instructs the outlet to reattach the subtree, and the detached event emits when the RouteReuseStrategy instructs the outlet to detach the subtree.

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

Methods

Called when the RouteReuseStrategy instructs to detach the subtree

      
      detach(): ComponentRef<any>
    
Parameters

There are no parameters.

Returns

ComponentRef<any>

Called when the RouteReuseStrategy instructs to re-attach a previously detached subtree

      
      attach(ref: ComponentRef<any>, activatedRoute: ActivatedRoute)
    
Parameters
ref ComponentRef<any>
activatedRoute ActivatedRoute
      
      deactivate(): void
    
Parameters

There are no parameters.

Returns

void

      
      activateWith(activatedRoute: ActivatedRoute, environmentInjector?: EnvironmentInjector)
    
Parameters
activatedRoute ActivatedRoute
environmentInjector EnvironmentInjector

Optional. Default is undefined.