Ignite UI for Angular

All
  • Public
  • Public/Protected
  • All

Class IgxOverlayService

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

Hierarchy

  • IgxOverlayService

Implements

  • OnDestroy

Constructors

Properties

Methods

Constructors

constructor

  • new IgxOverlayService(_factoryResolver: ComponentFactoryResolver, _appRef: ApplicationRef, _injector: Injector, builder: AnimationBuilder, document: any, _zone: NgZone): IgxOverlayService

Properties

onAnimation

onAnimation: EventEmitter<OverlayAnimationEventArgs> = new EventEmitter<OverlayAnimationEventArgs>()

Emitted before animation is started

onAnimation(event: OverlayAnimationEventArgs){
    const onAnimation = event;
}

onAppended

onAppended: EventEmitter<OverlayEventArgs> = new EventEmitter<OverlayEventArgs>()

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

onAppended(event: OverlayEventArgs){
    const onAppended = event;
}

onClosed

onClosed: EventEmitter<OverlayEventArgs> = new EventEmitter<OverlayEventArgs>()

Emitted after the component is closed and all animations are finished.

onClosed(event: OverlayEventArgs){
    const onClosed = event;
}

onClosing

onClosing: EventEmitter<OverlayClosingEventArgs> = new EventEmitter<OverlayClosingEventArgs>()

Emitted before the component is closed.

onClosing(event: OverlayCancelableEventArgs){
    const onClosing = event;
}

onOpened

onOpened: EventEmitter<OverlayEventArgs> = new EventEmitter<OverlayEventArgs>()

Emitted after the component is opened and all animations are finished.

onOpened(event: OverlayEventArgs){
    const onOpened = event;
}

onOpening

onOpening: EventEmitter<OverlayCancelableEventArgs> = new EventEmitter<OverlayCancelableEventArgs>()

Emitted before the component is opened.

onOpening(event: OverlayCancelableEventArgs){
    const onOpening = event;
}

Methods

attach

  • attach(element: ElementRef, settings?: OverlaySettings): string
  • attach(component: Type<any>, settings?: OverlaySettings, moduleRef?: Pick<NgModuleRef<any>, "injector" | "componentFactoryResolver">): string

  • Generates Id. Provide this Id when call show(id, settings?) method

    Parameters

    • element: ElementRef
    • Optional settings: OverlaySettings

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

    Returns string

    Id of the created overlay. Valid until onClosed is emitted.

  • Generates Id. Provide this Id when call show(id, settings?) method

    Parameters

    • component: Type<any>

      Component Type to show in overlay

    • Optional settings: OverlaySettings

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

    • Optional moduleRef: Pick<NgModuleRef<any>, "injector" | "componentFactoryResolver">

      Optional reference to an object containing Injector and ComponentFactoryResolver that can resolve the component's factory

    Returns string

    Id of the created overlay. Valid until onClosed is emitted.

hide

  • hide(id: string): void

hideAll

  • hideAll(): void

reposition

  • reposition(id: string): void

setOffset

  • setOffset(id: string, deltaX: number, deltaY: number): void

show

  • Shows the overlay for provided id.

    Parameters

    • id: string

      Id to show overlay for

    • Optional settings: OverlaySettings

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

    Returns string

  • Shows the provided component.

    @deprecated

    Use attach(component) to obtain an Id. Then show(id, settings?) with provided Id.

    Parameters

    • component: ElementRef | Type<any>

      ElementRef or Component Type to show in overlay

    • Optional settings: OverlaySettings

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

    Returns string

    Id of the created overlay. Valid until onClosed is emitted.

    this.overlay.show(element, settings);