@angular/router

RouterOutlet

directive

stable

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

API

  
    class RouterOutlet implements OnDestroy ,OnInit ,RouterOutletContract {}

name

string

The name of the outlet

activateEvents

EventEmitter<any>

deactivateEvents

EventEmitter<any>

attachEvents

EventEmitter<unknown>

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

detachEvents

EventEmitter<unknown>

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

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.

isActivated

boolean

component

Object

activatedRoute

ActivatedRoute

activatedRouteData

Data

detach

ComponentRef<any>

Called when the RouteReuseStrategy instructs to detach the subtree

@returnsComponentRef<any>

attach

void

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

@paramrefComponentRef<any>

@paramactivatedRouteActivatedRoute

@returnsvoid

deactivate

void

@returnsvoid

activateWith

void

@paramactivatedRouteActivatedRoute

@paramenvironmentInjectorEnvironmentInjector

@returnsvoid

Description

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

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

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

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

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

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

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

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

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

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

Exported by

RouterModule