Overlay • Angular Material

API reference for Angular CDK overlay

import {OverlayModule} from '@angular/cdk/overlay';

Services

`Overlay`

Service to create Overlays. Overlays are dynamically added pieces of floating UI, meant to be used as a low-level building block for other components. Dialogs, tooltips, menus, selects, etc. can all be built using overlays. The service should primarily be used by authors of re-usable components rather than developers building end-user applications.

An overlay is a PortalOutlet, so any kind of Portal can be loaded into one.

Properties

Name	Description
`scrollStrategies: inject(ScrollStrategyOptions)`

Methods

create (config?: `OverlayConfig`): `OverlayRef`
Creates an overlay.
Parameters
config? `OverlayConfig`	Configuration applied to the overlay.
Returns
`OverlayRef`	Reference to the created overlay.

position (): `OverlayPositionBuilder`
Gets a position builder that can be used, via fluent API, to construct and configure a position strategy.
`OverlayPositionBuilder`	An overlay position builder.

position (): OverlayPositionBuilder

Gets a position builder that can be used, via fluent API, to construct and configure a position strategy.

Returns

OverlayPositionBuilder

An overlay position builder.

`OverlayContainer`

Container inside which all overlays will render.

Methods

getContainerElement (): `HTMLElement`
This method returns the overlay container element. It will lazily create the element the first time it is called to facilitate using the container in non-browser environments.
`HTMLElement`	the container element

getContainerElement (): HTMLElement

This method returns the overlay container element. It will lazily create the element the first time it is called to facilitate using the container in non-browser environments.

Returns

HTMLElement

the container element

`FullscreenOverlayContainer` extends OverlayContainer

Alternative to OverlayContainer that supports correct displaying of overlay elements in Fullscreen mode https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullScreen

Should be provided in the root component.

Methods

getContainerElement (): `HTMLElement`
This method returns the overlay container element. It will lazily create the element the first time it is called to facilitate using the container in non-browser environments.
`HTMLElement`	the container element

getContainerElement (): HTMLElement

This method returns the overlay container element. It will lazily create the element the first time it is called to facilitate using the container in non-browser environments.

Returns

HTMLElement

the container element

getFullscreenElement (): `Element`
When the page is put into fullscreen mode, a specific element is specified. Only that element and its children are visible when in fullscreen mode.
Returns
`Element`

`OverlayPositionBuilder`

Builder for overlay position strategy.

Methods

flexibleConnectedTo (origin: `FlexibleConnectedPositionStrategyOrigin`): `FlexibleConnectedPositionStrategy`
Creates a flexible position strategy.
Parameters
origin `FlexibleConnectedPositionStrategyOrigin`	Origin relative to which to position the overlay.
Returns
`FlexibleConnectedPositionStrategy`

global (): `GlobalPositionStrategy`
Creates a global position strategy.
Returns
`GlobalPositionStrategy`

`ScrollStrategyOptions`

Options for how an overlay will handle scrolling.

Users can provide a custom value for ScrollStrategyOptions to replace the default behaviors. This class primarily acts as a factory for ScrollStrategy instances.

Properties

Name	Description
`block: () => createBlockScrollStrategy(this._injector)`	Block scrolling.
`close: (config?: CloseScrollStrategyConfig) => createCloseScrollStrategy(this._injector, config)`	Close the overlay as soon as the user scrolls.
`noop: () => new NoopScrollStrategy()`	Do nothing on scroll.
`reposition: (config?: RepositionScrollStrategyConfig) => createRepositionScrollStrategy(this._injector, config)`	Update the overlay's position on scroll.

`OverlayOutsideClickDispatcher`

Service for dispatching mouse click events that land on the body to appropriate overlay ref, if any. It maintains a list of attached overlays to determine best suited overlay based on event target and order of overlay opens.

Methods

add (overlayRef: `OverlayRef`): `void`
Add a new overlay to the list of attached overlay refs.
Parameters
overlayRef `OverlayRef`

detach ():
Detaches the global keyboard event listener.

remove (overlayRef: `OverlayRef`): `void`
Remove an overlay from the list of attached overlay refs.
Parameters
overlayRef `OverlayRef`

`OverlayKeyboardDispatcher`

Service for dispatching keyboard events that land on the body to appropriate overlay ref, if any. It maintains a list of attached overlays to determine best suited overlay based on event target and order of overlay opens.

Methods

add (overlayRef: `OverlayRef`): `void`
Add a new overlay to the list of attached overlay refs.
Parameters
overlayRef `OverlayRef`

detach ():
Detaches the global keyboard event listener.

remove (overlayRef: `OverlayRef`): `void`
Remove an overlay from the list of attached overlay refs.
Parameters
overlayRef `OverlayRef`

Directives

`CdkOverlayOrigin`

Directive applied to an element to make it usable as an origin for an Overlay using a ConnectedPositionStrategy.

Selector: [cdk-overlay-origin] [overlay-origin] [cdkOverlayOrigin]

Exported as: cdkOverlayOrigin

Properties

Name	Description
`elementRef: inject(ElementRef)`

`CdkConnectedOverlay`

Directive to facilitate declarative creation of an Overlay using a FlexibleConnectedPositionStrategy.

Selector: [cdk-connected-overlay] [connected-overlay] [cdkConnectedOverlay]

Exported as: cdkConnectedOverlay

Properties

Name	Description
@Input('cdkConnectedOverlayBackdropClass') `backdropClass: string \| string[]`	The custom class to be set on the backdrop element.
@Input('cdkConnectedOverlayDisableClose') `disableClose: boolean`	Whether the overlay can be closed by user interaction.
@Input({ alias: 'cdkConnectedOverlayDisposeOnNavigation', transform: (value: unknown): OverlayDisposeOnNavigation => value === 'url-change' \|\| value === 'pop-state' ? value : booleanAttribute(value), }) `disposeOnNavigation: OverlayDisposeOnNavigation`	Whether the overlay should be disposed of when the user goes backwards/forwards in history.
@Input({ alias: 'cdkConnectedOverlayFlexibleDimensions', transform: booleanAttribute }) `flexibleDimensions: boolean`	Whether the overlay's width and height can be constrained to fit within the viewport.
@Input({ alias: 'cdkConnectedOverlayGrowAfterOpen', transform: booleanAttribute }) `growAfterOpen: boolean`	Whether the overlay can grow after the initial open when flexible positioning is turned on.
@Input({ alias: 'cdkConnectedOverlayHasBackdrop', transform: booleanAttribute }) `hasBackdrop: boolean`	Whether or not the overlay should attach a backdrop.
@Input('cdkConnectedOverlayHeight') `height: number \| string`	The height of the overlay panel.
@Input({ alias: 'cdkConnectedOverlayLockPosition', transform: booleanAttribute }) `lockPosition: boolean`	Whether or not the overlay should be locked when scrolling.
@Input({ alias: 'cdkConnectedOverlayMatchWidth', transform: booleanAttribute }) `matchWidth: boolean`	Whether the overlay should match the trigger's width.
@Input('cdkConnectedOverlayMinHeight') `minHeight: number \| string`	The min height of the overlay panel.
@Input('cdkConnectedOverlayMinWidth') `minWidth: number \| string`	The min width of the overlay panel.
@Input('cdkConnectedOverlayOffsetX') `offsetX: number`	The offset in pixels for the overlay connection point on the x-axis
@Input('cdkConnectedOverlayOffsetY') `offsetY: number`	The offset in pixels for the overlay connection point on the y-axis
@Input('cdkConnectedOverlayOpen') `open: boolean`	Whether the overlay is open.
@Input('cdkConnectedOverlayOrigin') `origin: CdkOverlayOrigin \| FlexibleConnectedPositionStrategyOrigin`	Origin for the connected overlay.
@Input('cdkConnectedOverlayPanelClass') `panelClass: string \| string[]`	The custom class to add to the overlay pane element.
@Input('cdkConnectedOverlayPositionStrategy') `positionStrategy: FlexibleConnectedPositionStrategy`	This input overrides the positions input if specified. It lets users pass in arbitrary positioning strategies.
@Input('cdkConnectedOverlayPositions') `positions: ConnectedPosition[]`	Registered connected position pairs.
@Input({ alias: 'cdkConnectedOverlayPush', transform: booleanAttribute }) `push: boolean`	Whether the overlay can be pushed on-screen if none of the provided positions fit.
@Input('cdkConnectedOverlayScrollStrategy') `scrollStrategy: ScrollStrategy`	Strategy to be used when handling scroll events while the overlay is open.
@Input('cdkConnectedOverlayTransformOriginOn') `transformOriginSelector: string`	CSS selector which to set the transform origin.
@Input({ alias: 'cdkConnectedOverlayUsePopover' }) `usePopover: FlexibleOverlayPopoverLocation \| null`	Whether the connected overlay should be rendered inside a popover element or the overlay container.
@Input('cdkConnectedOverlayViewportMargin') `viewportMargin: ViewportMargin`	Margin between the overlay and the viewport edges.
@Input('cdkConnectedOverlayWidth') `width: number \| string`	The width of the overlay panel.
@Output() `attach: EventEmitter<void>`	Event emitted when the overlay has been attached.
@Output() `backdropClick: EventEmitter<MouseEvent>`	Event emitted when the backdrop is clicked.
@Output() `detach: EventEmitter<void>`	Event emitted when the overlay has been detached.
@Output() `overlayKeydown: EventEmitter<KeyboardEvent>`	Emits when there are keyboard events that are targeted at the overlay.
@Output() `overlayOutsideClick: EventEmitter<MouseEvent>`	Emits when there are mouse outside click events that are targeted at the overlay.
@Output() `positionChange: EventEmitter<ConnectedOverlayPositionChange>`	Event emitted when the position has changed.
`dir: Direction`	The element's layout direction.
`overlayRef: OverlayRef`	The associated overlay reference.

Methods

attachOverlay ():
Attaches the overlay.

detachOverlay ():
Detaches the overlay.

Classes

`OverlayRef`

Reference to an overlay that has been created with the Overlay service. Used to manipulate or dispose of said overlay.

Properties

Name	Description
`backdropElement: HTMLElement \| null`	The overlay's backdrop HTML element.
`eventPredicate: ((event: Event) => boolean) \| null`	Function that determines if this overlay should receive a specific event.
`hostElement: HTMLElement`	Wrapper around the panel element. Can be used for advanced positioning where a wrapper with specific styling is required around the overlay pane.
`overlayElement: HTMLElement`	The overlay's HTML element

Methods

addPanelClass (classes: `string \| string[]`): `void`
Add a CSS class or an array of classes to the overlay pane.
Parameters
classes `string \| string[]`

attach (portal: `ComponentPortal<T>`): `ComponentRef<T>`
Parameters
portal `ComponentPortal<T>`
Returns
`ComponentRef<T>`

attach (portal: `TemplatePortal<T>`): `EmbeddedViewRef<T>`
Parameters
portal `TemplatePortal<T>`
Returns
`EmbeddedViewRef<T>`

attach (portal: `any`): `any`
Parameters
portal `any`
Returns
`any`

attachments (): `Observable<void>`
Gets an observable that emits when the overlay has been attached.
Returns
`Observable<void>`

backdropClick (): `Observable<MouseEvent>`
Gets an observable that emits when the backdrop has been clicked.
Returns
`Observable<MouseEvent>`

detach (): `any`
Detaches an overlay from a portal.
`any`	The portal detachment result.

detach (): any

Detaches an overlay from a portal.

Returns

any

The portal detachment result.

detachBackdrop (): `void`
Detaches the backdrop (if any) associated with the overlay.

detachments (): `Observable<void>`
Gets an observable that emits when the overlay has been detached.
Returns
`Observable<void>`

dispose (): `void`
Cleans up the overlay from the DOM.

getConfig (): `OverlayConfig`
Gets the current overlay configuration, which is immutable.
Returns
`OverlayConfig`

getDirection (): `Direction`
Returns the layout direction of the overlay panel.
Returns
`Direction`

hasAttached (): `boolean`
Whether the overlay has attached content.
Returns
`boolean`

keydownEvents (): `Observable<KeyboardEvent>`
Gets an observable of keydown events targeted to this overlay.
Returns
`Observable<KeyboardEvent>`

outsidePointerEvents (): `Observable<MouseEvent>`
Gets an observable of pointer events targeted outside this overlay.
Returns
`Observable<MouseEvent>`

removePanelClass (classes: `string \| string[]`): `void`
Remove a CSS class or an array of classes from the overlay pane.
Parameters
classes `string \| string[]`

setDirection (dir: `Directionality \| Direction`): `void`
Sets the LTR/RTL direction for the overlay.
Parameters
dir `Directionality \| Direction`

updatePosition (): `void`
Updates the position of the overlay based on the position strategy.

updatePositionStrategy (strategy: `PositionStrategy`): `void`
Switches to a new position strategy and updates the overlay position.
Parameters
strategy `PositionStrategy`

updateScrollStrategy (strategy: `ScrollStrategy`): `void`
Switches to a new scroll strategy.
Parameters
strategy `ScrollStrategy`

updateSize (sizeConfig: `OverlaySizeConfig`): `void`
Update the size properties of the overlay.
Parameters
sizeConfig `OverlaySizeConfig`

`GlobalPositionStrategy`

A strategy for positioning overlays. Using this strategy, an overlay is given an explicit position relative to the browser's viewport. We use flexbox, instead of transforms, in order to avoid issues with subpixel rendering which can cause the element to become blurry.

Methods

attach (overlayRef: `OverlayRef`): `void`
Parameters
overlayRef `OverlayRef`

bottom (value: `string = ''`): `this`
Sets the bottom position of the overlay. Clears any previously set vertical position.
Parameters
value `string = ''`	New bottom offset.
Returns
`this`

centerHorizontally (offset: `string = ''`): `this`
Centers the overlay horizontally with an optional offset. Clears any previously set horizontal position.
Parameters
offset `string = ''`	Overlay offset from the horizontal center.
Returns
`this`

centerVertically (offset: `string = ''`): `this`
Centers the overlay vertically with an optional offset. Clears any previously set vertical position.
Parameters
offset `string = ''`	Overlay offset from the vertical center.
Returns
`this`

end (offset: , value: `string = ''`): `this`
Sets the overlay to the end of the viewport, depending on the overlay direction. This will be to the right in LTR layouts and to the left in RTL.
Parameters
offset	Offset from the edge of the screen.
value `string = ''`
Returns
`this`

left (value: `string = ''`): `this`
Sets the left position of the overlay. Clears any previously set horizontal position.
Parameters
value `string = ''`	New left offset.
Returns
`this`

right (value: `string = ''`): `this`
Sets the right position of the overlay. Clears any previously set horizontal position.
Parameters
value `string = ''`	New right offset.
Returns
`this`

start (offset: , value: `string = ''`): `this`
Sets the overlay to the start of the viewport, depending on the overlay direction. This will be to the left in LTR layouts and to the right in RTL.
Parameters
offset	Offset from the edge of the screen.
value `string = ''`
Returns
`this`

top (value: `string = ''`): `this`
Sets the top position of the overlay. Clears any previously set vertical position.
Parameters
value `string = ''`	New top offset.
Returns
`this`

Deprecated height (value: `string = ''`): `this`
Sets the overlay height and clears any previously set height.
Parameters
value `string = ''`	New height for the overlay
Returns
`this`

Deprecated width (value: `string = ''`): `this`
Sets the overlay width and clears any previously set width.
Parameters
value `string = ''`	New width for the overlay
Returns
`this`

`FlexibleConnectedPositionStrategy`

A strategy for positioning overlays. Using this strategy, an overlay is given an implicit position relative some origin element. The relative position is defined in terms of a point on the origin element that is connected to a point on the overlay element. For example, a basic dropdown is connecting the bottom-left corner of the origin to the top-left corner of the overlay.

Properties

Name	Description
`positionChanges: Observable<ConnectedOverlayPositionChange>`	Observable sequence of position changes.
`positions: ConnectionPositionPair[]`	Ordered list of preferred positions, from most to least desirable.

Methods

attach (overlayRef: `OverlayRef`): `void`
Attaches this position strategy to an overlay.
Parameters
overlayRef `OverlayRef`

detach (): `void`

dispose (): `void`
Cleanup after the element gets destroyed.

reapplyLastPosition (): `void`
This re-aligns the overlay element with the trigger in its last calculated position, even if a position higher in the "preferred positions" list would now fit. This allows one to re-align the panel without changing the orientation of the panel.

setOrigin (origin: `FlexibleConnectedPositionStrategyOrigin`): `this`
Sets the origin, relative to which to position the overlay. Using an element origin is useful for building components that need to be positioned relatively to a trigger (e.g. dropdown menus or tooltips), whereas using a point can be used for cases like contextual menus which open relative to the user's pointer.
Parameters
origin `FlexibleConnectedPositionStrategyOrigin`	Reference to the new origin.
Returns
`this`

withDefaultOffsetX (offset: `number`): `this`
Sets the default offset for the overlay's connection point on the x-axis.
Parameters
offset `number`	New offset in the X axis.
Returns
`this`

withDefaultOffsetY (offset: `number`): `this`
Sets the default offset for the overlay's connection point on the y-axis.
Parameters
offset `number`	New offset in the Y axis.
Returns
`this`

withFlexibleDimensions (flexibleDimensions: `boolean = true`): `this`
Sets whether the overlay's width and height can be constrained to fit within the viewport.
Parameters
flexibleDimensions `boolean = true`
Returns
`this`

withGrowAfterOpen (growAfterOpen: `boolean = true`): `this`
Sets whether the overlay can grow after the initial open via flexible width/height.
Parameters
growAfterOpen `boolean = true`
Returns
`this`

withLockedPosition (isLocked: `boolean = true`): `this`
Sets whether the overlay's position should be locked in after it is positioned initially. When an overlay is locked in, it won't attempt to reposition itself when the position is re-applied (e.g. when the user scrolls away).
Parameters
isLocked `boolean = true`	Whether the overlay should locked in.
Returns
`this`

withPopoverLocation (location: `FlexibleOverlayPopoverLocation`): `this`
Determines where in the DOM the overlay will be rendered when popover mode is enabled.
Parameters
location `FlexibleOverlayPopoverLocation`	Configures the location in the DOM. Supports the following values: `global` - The default which inserts the overlay inside the overlay container. `inline` - Inserts the overlay next to the trigger. {type: 'parent', element: element} - Inserts the overlay to a child of a custom parent element.
Returns
`this`

withPositions (positions: `ConnectedPosition[]`): `this`
Adds new preferred positions.
Parameters
positions `ConnectedPosition[]`	List of positions options for this overlay.
Returns
`this`

withPush (canPush: `boolean = true`): `this`
Sets whether the overlay can be pushed on-screen if none of the provided positions fit.
Parameters
canPush `boolean = true`
Returns
`this`

withScrollableContainers (scrollables: `ScrollDispatcherTarget[]`): `this`
Sets the list of Scrollable containers that host the origin element so that on reposition we can evaluate if it or the overlay has been clipped or outside view. Every Scrollable must be an ancestor element of the strategy's origin element.
Parameters
scrollables `ScrollDispatcherTarget[]`
Returns
`this`

withTransformOriginOn (selector: `string`): `this`
Configures that the position strategy should set a `transform-origin` on some elements inside the overlay, depending on the current position that is being applied. This is useful for the cases where the origin of an animation can change depending on the alignment of the overlay.
Parameters
selector `string`	CSS selector that will be used to find the target elements onto which to set the transform origin.
Returns
`this`

withViewportMargin (margin: `ViewportMargin`): `this`
Sets a minimum distance the overlay may be positioned from the bottom edge of the viewport.
Parameters
margin `ViewportMargin`	Required margin between the overlay and the viewport. It can be a number to be applied to all directions, or an object to supply different values for each direction.
Returns
`this`

`OverlayConfig`

Initial configuration used when creating an overlay.

Properties

Name	Description
`backdropClass: string \| string[]`	Custom class to add to the backdrop
`direction: Direction \| Directionality`	Direction of the text in the overlay panel. If a `Directionality` instance is passed in, the overlay will handle changes to its value automatically.
`disableAnimations: boolean`	Whether to disable any built-in animations.
`disposeOnNavigation: OverlayDisposeOnNavigation`	Whether the overlay should be disposed of when the user navigates.
`eventPredicate: (event: Event) => boolean`	Function that determines if the overlay should receive a specific event or if the event should go to the next overlay in the stack.
`hasBackdrop: boolean`	Whether the overlay has a backdrop.
`height: number \| string`	The height of the overlay panel. If a number is provided, pixel units are assumed.
`maxHeight: number \| string`	The max-height of the overlay panel. If a number is provided, pixel units are assumed.
`maxWidth: number \| string`	The max-width of the overlay panel. If a number is provided, pixel units are assumed.
`minHeight: number \| string`	The min-height of the overlay panel. If a number is provided, pixel units are assumed.
`minWidth: number \| string`	The min-width of the overlay panel. If a number is provided, pixel units are assumed.
`panelClass: string \| string[]`	Custom class to add to the overlay pane.
`positionStrategy: PositionStrategy`	Strategy with which to position the overlay.
`scrollStrategy: ScrollStrategy`	Strategy to be used when handling scroll events while the overlay is open.
`usePopover: boolean`	Whether the overlay should be rendered as a native popover element, rather than placing it inside of the overlay container.
`width: number \| string`	The width of the overlay panel. If a number is provided, pixel units are assumed.

`ConnectionPositionPair`

The points of the origin element and the overlay element to connect.

Properties

Name	Description
`offsetX: number`	Offset along the X axis.
`offsetY: number`	Offset along the Y axis.
`originX: HorizontalConnectionPos`	X-axis attachment point for connected overlay origin. Can be 'start', 'end', or 'center'.
`originY: VerticalConnectionPos`	Y-axis attachment point for connected overlay origin. Can be 'top', 'bottom', or 'center'.
`overlayX: HorizontalConnectionPos`	X-axis attachment point for connected overlay. Can be 'start', 'end', or 'center'.
`overlayY: VerticalConnectionPos`	Y-axis attachment point for connected overlay. Can be 'top', 'bottom', or 'center'.
`panelClass: string \| string[]`	Class(es) to be applied to the panel while this position is active.

`ConnectedOverlayPositionChange`

The change event emitted by the strategy when a fallback position is used.

Properties

Name	Description
`connectionPair: ConnectionPositionPair`	The position used as a result of this change.

`RepositionScrollStrategy`

Strategy that will update the element position as the user is scrolling.

Methods

attach (overlayRef: `OverlayRef`):
Attaches this scroll strategy to an overlay.
Parameters
overlayRef `OverlayRef`

detach ():

disable ():
Disables repositioning of the attached overlay on scroll.

enable ():
Enables repositioning of the attached overlay on scroll.

`CloseScrollStrategy`

Strategy that will close the overlay as soon as the user starts scrolling.

Methods

attach (overlayRef: `OverlayRef`):
Attaches this scroll strategy to an overlay.
Parameters
overlayRef `OverlayRef`

detach ():

disable ():
Disables the closing the attached overlay on scroll.

enable ():
Enables the closing of the attached overlay on scroll.

`NoopScrollStrategy`

Scroll strategy that doesn't do anything.

Methods

attach ():
Does nothing, as this scroll strategy is a no-op.

disable ():
Does nothing, as this scroll strategy is a no-op.

enable ():
Does nothing, as this scroll strategy is a no-op.

`BlockScrollStrategy`

Strategy that will prevent the user from scrolling while the overlay is visible.

Methods

attach ():
Attaches this scroll strategy to an overlay.

disable ():
Unblocks page-level scroll while the attached overlay is open.

enable ():
Blocks page-level scroll while the attached overlay is open.

Interfaces

`OverlayDefaultConfig`

Object used to configure the default options for overlays.

Properties

Name	Description
`usePopover: boolean`	Whether overlays should be rendered inside popovers by default.

`CdkConnectedOverlayConfig`

Object used to configure the CdkConnectedOverlay directive.

Properties

Name	Description
`backdropClass: string \| string[]`
`disableClose: boolean`
`disposeOnNavigation: OverlayDisposeOnNavigation`
`flexibleDimensions: boolean`
`growAfterOpen: boolean`
`hasBackdrop: boolean`
`height: number \| string`
`lockPosition: boolean`
`matchWidth: boolean`
`minHeight: number \| string`
`minWidth: number \| string`
`offsetX: number`
`offsetY: number`
`origin: CdkOverlayOrigin \| FlexibleConnectedPositionStrategyOrigin`
`panelClass: string \| string[]`
`positionStrategy: FlexibleConnectedPositionStrategy`
`positions: ConnectedPosition[]`
`push: boolean`
`scrollStrategy: ScrollStrategy`
`transformOriginSelector: string`
`usePopover: FlexibleOverlayPopoverLocation \| null`
`viewportMargin: ViewportMargin`
`width: number \| string`

`OverlaySizeConfig`

Size properties for an overlay.

Properties

Name	Description
`height: number \| string`
`maxHeight: number \| string`
`maxWidth: number \| string`
`minHeight: number \| string`
`minWidth: number \| string`
`width: number \| string`

`PositionStrategy`

Strategy for setting the position on an overlay.

Methods

apply (): `void`
Updates the position of the overlay element.

attach (overlayRef: `OverlayRef`): `void`
Attaches this position strategy to an overlay.
Parameters
overlayRef `OverlayRef`

detach (): `void`
Called when the overlay is detached.

dispose (): `void`
Cleans up any DOM modifications made by the position strategy, if necessary.

getPopoverInsertionPoint (): `Element \| null \| { type: 'parent'; element: Element; }`
Gets the element in the DOM after which to insert the overlay when it is rendered out as a popover.
Returns
`Element \| null \| { type: 'parent'; element: Element; }`

`ConnectedPosition`

A connected position as specified by the user.

Properties

Name	Description
`offsetX: number`
`offsetY: number`
`originX: 'start' \| 'center' \| 'end'`
`originY: 'top' \| 'center' \| 'bottom'`
`overlayX: 'start' \| 'center' \| 'end'`
`overlayY: 'top' \| 'center' \| 'bottom'`
`panelClass: string \| string[]`
`weight: number`

`OriginConnectionPosition`

A connection point on the origin element.

Properties

Name	Description
`originX: HorizontalConnectionPos`
`originY: VerticalConnectionPos`

`OverlayConnectionPosition`

A connection point on the overlay element.

Properties

Name	Description
`overlayX: HorizontalConnectionPos`
`overlayY: VerticalConnectionPos`

`ScrollStrategy`

Describes a strategy that will be used by an overlay to handle scroll events while it is open.

Properties

Name	Description
`attach: (overlayRef: OverlayRef) => void`	Attaches this `ScrollStrategy` to an overlay.
`detach: () => void`	Detaches the scroll strategy from the current overlay.
`disable: () => void`	Disable this scroll strategy (called when the attached overlay is detached from a portal).
`enable: () => void`	Enable this scroll strategy (called when the attached overlay is attached to a portal).

`RepositionScrollStrategyConfig`

Config options for the RepositionScrollStrategy.

Properties

Name	Description
`autoClose: boolean`	Whether to close the overlay once the user has scrolled away completely.
`scrollThrottle: number`	Time in milliseconds to throttle the scroll events.

Functions

createOverlayRef (injector: `Injector`, config?: `OverlayConfig`): `OverlayRef`
Creates an overlay.
Parameters
injector `Injector`	Injector to use when resolving the overlay's dependencies.
config? `OverlayConfig`	Configuration applied to the overlay.
Returns
`OverlayRef`	Reference to the created overlay.

createGlobalPositionStrategy (injector: , _injector: `Injector`): `GlobalPositionStrategy`
Creates a global position strategy.
Parameters
injector	Injector used to resolve dependencies for the strategy.
_injector `Injector`
Returns
`GlobalPositionStrategy`

createFlexibleConnectedPositionStrategy (injector: `Injector`, origin: `FlexibleConnectedPositionStrategyOrigin`): `FlexibleConnectedPositionStrategy`
Creates a flexible position strategy.
Parameters
injector `Injector`	Injector used to resolve dependnecies for the position strategy.
origin `FlexibleConnectedPositionStrategyOrigin`	Origin relative to which to position the overlay.
Returns
`FlexibleConnectedPositionStrategy`

createRepositionScrollStrategy (injector: `Injector`, config?: `RepositionScrollStrategyConfig`): `RepositionScrollStrategy`
Creates a scroll strategy that updates the overlay's position when the user scrolls.
Parameters
injector `Injector`	Injector used to resolve dependencies of the scroll strategy.
config? `RepositionScrollStrategyConfig`	Configuration options for the scroll strategy.
Returns
`RepositionScrollStrategy`

createCloseScrollStrategy (injector: `Injector`, config?: `CloseScrollStrategyConfig`): `CloseScrollStrategy`
Creates a scroll strategy that closes the overlay when the user starts to scroll.
Parameters
injector `Injector`	Injector used to resolve dependencies of the scroll strategy.
config? `CloseScrollStrategyConfig`	Configuration options for the scroll strategy.
Returns
`CloseScrollStrategy`

createNoopScrollStrategy (): `NoopScrollStrategy`
Creates a scroll strategy that does nothing.
Returns
`NoopScrollStrategy`

createBlockScrollStrategy (injector: `Injector`, config: ): `BlockScrollStrategy`
Creates a scroll strategy that prevents the user from scrolling while the overlay is open.
Parameters
injector `Injector`	Injector used to resolve dependencies of the scroll strategy.
config	Configuration options for the scroll strategy.
Returns
`BlockScrollStrategy`

Type aliases

`FlexibleOverlayPopoverLocation`

Supported locations in the DOM for connected overlays.

type FlexibleOverlayPopoverLocation = 'global' | 'inline' | {
    type: 'parent';
    element: Element;
};

`FlexibleConnectedPositionStrategyOrigin`

Possible values that can be set as the origin of a FlexibleConnectedPositionStrategy.

type FlexibleConnectedPositionStrategyOrigin = ElementRef | Element | (Point & {
    width?: number;
    height?: number;
});

`OverlayDisposeOnNavigation`

Value that can be used to configure the behavior of OverlayConfig.disposeOnNavigation. The value correspond to the following:

true or pop-state - Overlay is only disposed when the back/forward browser buttons are pressed.
false - Overlay does nothing on navigations.
url-change - Overlay closes on any URL change. Note that this may close overlays opened from route resolvers immediately.

type OverlayDisposeOnNavigation = boolean | 'url-change' | 'pop-state';

`HorizontalConnectionPos`

Horizontal dimension of a connection point on the perimeter of the origin or overlay element.

type HorizontalConnectionPos = 'start' | 'center' | 'end';

`VerticalConnectionPos`

Vertical dimension of a connection point on the perimeter of the origin or overlay element.

type VerticalConnectionPos = 'top' | 'center' | 'bottom';

`ViewportMargin`

The distance between the overlay element and the viewport.

type ViewportMargin = number | {
    top?: number;
    bottom?: number;
    start?: number;
    end?: number;
};

Constants

`OVERLAY_DEFAULT_CONFIG`

Injection token used to configure the default options for CDK overlays.

const OVERLAY_DEFAULT_CONFIG: InjectionToken;

`CDK_CONNECTED_OVERLAY_DEFAULT_CONFIG`

Injection token that can be used to configure the default options for the CdkConnectedOverlay directive.

const CDK_CONNECTED_OVERLAY_DEFAULT_CONFIG: InjectionToken;

`STANDARD_DROPDOWN_ADJACENT_POSITIONS`

const STANDARD_DROPDOWN_ADJACENT_POSITIONS: ConnectedPosition[];

`STANDARD_DROPDOWN_BELOW_POSITIONS`

const STANDARD_DROPDOWN_BELOW_POSITIONS: ConnectedPosition[];

API reference for Angular CDK overlay

Services link

Overlay link

Properties

Methods

OverlayContainer link

Methods

FullscreenOverlayContainer extends OverlayContainer link

Methods

OverlayPositionBuilder link

Methods

ScrollStrategyOptions link

Properties

OverlayOutsideClickDispatcher link

Methods

OverlayKeyboardDispatcher link

Methods

Directives link

CdkOverlayOrigin link

Properties

CdkConnectedOverlay link

Properties

Methods

Classes link

OverlayRef link

Properties

Methods

GlobalPositionStrategy link

Methods

FlexibleConnectedPositionStrategy link

Properties

Methods

OverlayConfig link

Properties

ConnectionPositionPair link

Properties

ConnectedOverlayPositionChange link

Properties

RepositionScrollStrategy link

Methods

CloseScrollStrategy link

Methods

NoopScrollStrategy link

Methods

BlockScrollStrategy link

Methods

Interfaces link

OverlayDefaultConfig link

Properties

CdkConnectedOverlayConfig link

Properties

OverlaySizeConfig link

Properties

PositionStrategy link

Methods

ConnectedPosition link

Properties

OriginConnectionPosition link

Properties

OverlayConnectionPosition link

Properties

ScrollStrategy link

Properties

RepositionScrollStrategyConfig link

Properties

Functions link

Type aliases link

FlexibleOverlayPopoverLocation link

FlexibleConnectedPositionStrategyOrigin link

OverlayDisposeOnNavigation link

HorizontalConnectionPos link

VerticalConnectionPos link

ViewportMargin link

Constants link

OVERLAY_DEFAULT_CONFIG link

CDK_CONNECTED_OVERLAY_DEFAULT_CONFIG link

STANDARD_DROPDOWN_ADJACENT_POSITIONS link

STANDARD_DROPDOWN_BELOW_POSITIONS link

Services

`Overlay`

`OverlayContainer`

`FullscreenOverlayContainer` extends OverlayContainer

`OverlayPositionBuilder`

`ScrollStrategyOptions`

`OverlayOutsideClickDispatcher`

`OverlayKeyboardDispatcher`

Directives

`CdkOverlayOrigin`

`CdkConnectedOverlay`

Classes

`OverlayRef`

`GlobalPositionStrategy`

`FlexibleConnectedPositionStrategy`

`OverlayConfig`

`ConnectionPositionPair`

`ConnectedOverlayPositionChange`

`RepositionScrollStrategy`

`CloseScrollStrategy`

`NoopScrollStrategy`

`BlockScrollStrategy`

Interfaces

`OverlayDefaultConfig`

`CdkConnectedOverlayConfig`

`OverlaySizeConfig`

`PositionStrategy`

`ConnectedPosition`

`OriginConnectionPosition`

`OverlayConnectionPosition`

`ScrollStrategy`

`RepositionScrollStrategyConfig`

Functions

Type aliases

`FlexibleOverlayPopoverLocation`

`FlexibleConnectedPositionStrategyOrigin`

`OverlayDisposeOnNavigation`

`HorizontalConnectionPos`

`VerticalConnectionPos`

`ViewportMargin`

Constants

`OVERLAY_DEFAULT_CONFIG`

`CDK_CONNECTED_OVERLAY_DEFAULT_CONFIG`

`STANDARD_DROPDOWN_ADJACENT_POSITIONS`

`STANDARD_DROPDOWN_BELOW_POSITIONS`