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

See more...

interface RouterOutletContract {
  isActivated: boolean
  component: Object | null
  activatedRouteData: Data
  activatedRoute: ActivatedRoute | null
  activateEvents?: EventEmitter<unknown>
  deactivateEvents?: EventEmitter<unknown>
  attachEvents?: EventEmitter<unknown>
  detachEvents?: EventEmitter<unknown>
  supportsBindingToComponentInputs?: true
  activateWith(activatedRoute: ActivatedRoute, environmentInjector: EnvironmentInjector): void
  deactivate(): void
  detach(): ComponentRef<unknown>
  attach(ref: ComponentRef<unknown>, activatedRoute: ActivatedRoute): void
}

See also

• ChildrenOutletContexts

Description

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.

Properties

Property	Description
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.
activateEvents?: EventEmitter<unknown>	Emits an activate event when a new component is instantiated
deactivateEvents?: EventEmitter<unknown>	Emits a deactivate event when a component is destroyed.
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.
supportsBindingToComponentInputs?: true	Read-Only 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.

Methods

activateWith()
Called by the Router when the outlet should activate (create a component).
activateWith(activatedRoute: ActivatedRoute, environmentInjector: EnvironmentInjector): void Parameters activatedRoute ActivatedRoute environmentInjector EnvironmentInjector Returns void

deactivate()
A request to destroy the currently activated component.
deactivate(): void Parameters There are no parameters. Returns void
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.

detach()
Called when the RouteReuseStrategy instructs to detach the subtree.
detach(): ComponentRef<unknown> Parameters There are no parameters. Returns ComponentRef<unknown>
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.

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