Documentation The overlay service allows users to show components on overlay div above all other elements in the page.

Constructors

Section titled "Constructors"

IgxOverlayService

new IgxOverlayService(): IgxOverlayService

Defined in projects/igniteui-angular/core/src/services/overlay/overlay.ts:135

Returns IgxOverlayService

Properties

Section titled "Properties"

animationStarting

Section titled "animationStarting"

Emitted just before the overlay animation start.

animationStarting(event: OverlayAnimationEventArgs){
    const animationStarting = event;
}
animationStarting: EventEmitter<OverlayAnimationEventArgs>

Defined in projects/igniteui-angular/core/src/services/overlay/overlay.ts:116

closed

Section titled "closed"

Emitted after the overlay content is closed and all animations are finished.

closed(event: OverlayEventArgs){
    const closed = event;
}
closed: EventEmitter<OverlayEventArgs>

Defined in projects/igniteui-angular/core/src/services/overlay/overlay.ts:86

closing

Section titled "closing"

Emitted just before the overlay content starts to close.

closing(event: OverlayCancelableEventArgs){
    const closing = event;
}
closing: EventEmitter<OverlayClosingEventArgs>

Defined in projects/igniteui-angular/core/src/services/overlay/overlay.ts:76

contentAppended

Section titled "contentAppended"

Emitted after the content is appended to the overlay, and before animations are started.

contentAppended(event: OverlayEventArgs){
    const contentAppended = event;
}
contentAppended: EventEmitter<OverlayEventArgs>

Defined in projects/igniteui-angular/core/src/services/overlay/overlay.ts:106

contentAppending

Section titled "contentAppending"

Emitted before the content is appended to the overlay.

contentAppending(event: OverlayEventArgs){
    const contentAppending = event;
}
contentAppending: EventEmitter<OverlayEventArgs>

Defined in projects/igniteui-angular/core/src/services/overlay/overlay.ts:96

opened

Section titled "opened"

Emitted after the overlay content is opened and all animations are finished.

opened(event: OverlayEventArgs){
    const opened = event;
}
opened: EventEmitter<OverlayEventArgs>

Defined in projects/igniteui-angular/core/src/services/overlay/overlay.ts:66

opening

Section titled "opening"

Emitted just before the overlay content starts to open.

opening(event: OverlayCancelableEventArgs){
    const opening = event;
}
opening: EventEmitter<OverlayCancelableEventArgs>

Defined in projects/igniteui-angular/core/src/services/overlay/overlay.ts:56

Methods

Section titled "Methods"

attach

Section titled "attach"

Generates Id. Provide this Id when call show(id) method

attach(element: ElementRef, settings: OverlaySettings): string

Defined in projects/igniteui-angular/core/src/services/overlay/overlay.ts:309

Parameters

  • element: ElementRef
  • settings: OverlaySettings

    (optional): Display settings for the overlay, such as positioning and scroll/close behavior.

Returns string

detach

Section titled "detach"

Remove overlay with the provided id.

detach(id: string): void

Defined in projects/igniteui-angular/core/src/services/overlay/overlay.ts:382

Parameters

  • id: string

    Id of the overlay to remove

    this.overlay.detach(id);

Returns void

detachAll

Section titled "detachAll"

Remove all the overlays.

this.overlay.detachAll();
detachAll(): void

Defined in projects/igniteui-angular/core/src/services/overlay/overlay.ts:407

Returns void

hide

Section titled "hide"

Hides the component with the ID provided as a parameter.

this.overlay.hide(id);
hide(id: string, event: Event): void

Defined in projects/igniteui-angular/core/src/services/overlay/overlay.ts:486

Parameters

  • id: string
  • event: Event

Returns void

hideAll

Section titled "hideAll"

Hides all the components and the overlay.

this.overlay.hideAll();
hideAll(): void

Defined in projects/igniteui-angular/core/src/services/overlay/overlay.ts:496

Returns void

reposition

Section titled "reposition"

Repositions the component with ID provided as a parameter.

reposition(id: string): void

Defined in projects/igniteui-angular/core/src/services/overlay/overlay.ts:510

Parameters

  • id: string

    Id to reposition overlay for

    this.overlay.reposition(id);

Returns void

setOffset

Section titled "setOffset"

Offsets the content along the corresponding axis by the provided amount with optional offsetMode that determines whether to add (by default) or set the offset values

setOffset(id: string, deltaX: number, deltaY: number, offsetMode: OffsetMode): void

Defined in projects/igniteui-angular/core/src/services/overlay/overlay.ts:543

Parameters

  • id: string

    Id to offset overlay for
  • deltaX: number

    Amount of offset in horizontal direction
  • deltaY: number

    Amount of offset in vertical direction
  • offsetMode: OffsetMode

    Determines whether to add (by default) or set the offset values with OffsetMode.Add and OffsetMode.Set

    this.overlay.setOffset(id, deltaX, deltaY, offsetMode);

Returns void

show

Section titled "show"

Shows the overlay for provided id.

show(id: string, settings: OverlaySettings): void

Defined in projects/igniteui-angular/core/src/services/overlay/overlay.ts:419

Parameters

  • id: string

    Id to show overlay for
  • settings: OverlaySettings

    Display settings for the overlay, such as positioning and scroll/close behavior.

Returns void

createAbsoluteOverlaySettings

Section titled "createAbsoluteOverlaySettings"

Creates overlay settings with global or container position strategy and preset position settings.

createAbsoluteOverlaySettings(position: AbsolutePosition, useContainerStrategy: boolean): OverlaySettings

Defined in projects/igniteui-angular/core/src/services/overlay/overlay.ts:149

Parameters

  • position: AbsolutePosition

    Preset position settings. Default position is center.
  • useContainerStrategy: boolean

    When true, uses ContainerPositionStrategy which positions the overlay relative to its nearest positioned ancestor container. When false or omitted, uses GlobalPositionStrategy which positions the overlay relative to the viewport.

Returns OverlaySettings

createRelativeOverlaySettings

Section titled "createRelativeOverlaySettings"

Creates overlay settings with auto, connected or elastic position strategy and preset position settings

createRelativeOverlaySettings(target: HTMLElement | Point, position: RelativePosition, strategy: RelativePositionStrategy): OverlaySettings

Defined in projects/igniteui-angular/core/src/services/overlay/overlay.ts:185

Parameters

  • target: HTMLElement | Point

    Attaching target for the component to show
  • position: RelativePosition

    Preset position settings. By default the element is positioned below the target, left aligned.
  • strategy: RelativePositionStrategy

    The relative position strategy to be applied to the overlay settings. Default is Auto positioning strategy.

Returns OverlaySettings