@angular/router

RouterOutletContract

interface

stable

An interface that defines the contract for developing a component outlet for the Router.

API

    
      interface RouterOutletContract extends  {}

isActivated

boolean

Whether the given outlet is activated.

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

component

Object | null

The instance of the activated component or null if the outlet is not activated.

activatedRouteData

Data

The Data of the ActivatedRoute snapshot.

activatedRoute

ActivatedRoute | null

The ActivatedRoute for the outlet or null if the outlet is not activated.

activateWith

void

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

@paramactivatedRouteActivatedRoute

@paramenvironmentInjectorEnvironmentInjector

@returnsvoid

deactivate

void

A request to destroy the currently activated component.

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

@returnsvoid

detach

ComponentRef<unknown>

Called when the RouteReuseStrategy instructs to detach the subtree.

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

@returnsComponentRef<unknown>

attach

void

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

@paramrefComponentRef<unknown>

@paramactivatedRouteActivatedRoute

@returnsvoid

activateEvents

EventEmitter<unknown> | undefined

Emits an activate event when a new component is instantiated

deactivateEvents

EventEmitter<unknown> | undefined

Emits a deactivate event when a component is destroyed.

attachEvents

EventEmitter<unknown> | undefined

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

detachEvents

EventEmitter<unknown> | undefined

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

supportsBindingToComponentInputs

true | undefined

Used to indicate that the outlet is able to bind data from the Router to the outlet component's inputs.

When this is undefined or false and the developer has opted in to the feature using withComponentInputBinding, a warning will be logged in dev mode if this outlet is used in the application.

Description

An interface that defines the contract for developing a component outlet for the Router.

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

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