ModalComponent class

A transcluding component that hosts inner content in a centered overlay.

A <modal> that is created within the context of another <modal> (nested) automatically forms a LIFO-stack in-which the newest modal is shown and the previous modals are not. Once the newest modal is dismissed, the next newest will be shown.

Modals are DeferredContentAware. Use *deferredContent to avoid having costly inner-content be created before the modal is visible.

If preventInteraction is true (it is by default), interaction with the rest of the application may be disabled until the dialog is closed.

Example usage: <modal preventInteraction="isModal" (visible)="showDialog"> Hello World!

<!-- Or, with deferred content -->
<modal ([visible])="showDialog">
  <template deferredContent>
    <expensive-component></expensive-component>
  </template>
</modal>

Events:

• open -- Fires whenever the modal is opening (before visibility).
• visible -- Fires whenever visibility changes.
• close -- Fires whenever the modal is closing (before visibility).
• shieldClick -- Fires whenever the modal background is pressed.

Properties:

• preventInteraction -- Set to false to allow interaction with your app.
• visible -- Set in order to change visibility. This will trigger an open and close interaction cycle that allows users to cancel.

Implemented types

• DeferredContentAware
• Modal

Annotations

• @Component(selector: 'modal', providers: [ExistingProvider(DeferredContentAware, ModalComponent), ExistingProvider(Modal, ModalComponent)], directives: [ModalControllerDirective], template: r''' <template [modalController]="resolvedOverlayRef"> <ng-content></ng-content> </template> ''', changeDetection: ChangeDetectionStrategy.onPush, preserveWhitespace: true, visibility: Visibility.all)

Constructors

ModalComponent(OverlayService overlayService, Element _element, DomService _domService, @Optional() @SkipSelf() Modal? _parentModal, @Optional() GlobalModalStack? _stack)

Properties

contentVisible → Stream<bool>

Component publishes to this stream to control the visibility of contents.

no setter, override

hashCode → int

The hash code for this object.

no setter, inherited

hidden ↔ bool

Whether the modal is temporarily hidden.

getter/setter pair, override

onClose → Stream<AsyncAction?>

Events that fires before making visible false.

no setter, override

onOpen → Stream<AsyncAction?>

Events that fire before making visible true.

no setter, override

onVisibleChanged → Stream<bool>

Events that fire when visible changes.

no setter, override

preventInteraction ← bool

no getter

resolvedOverlayRef → OverlayRef

no setter

restoreFocus ↔ bool

Whether to return focus to the last focused element before the modal opened.

getter/setter pair

runtimeType → Type

A representation of the runtime type of the object.

no setter, inherited

shieldClick → Stream<void>

A stream of click events on the modal.

no setter, override

uniquePaneId → String

no setter

visible ↔ bool

Whether the modal is visible in the DOM.

getter/setter pair, override-getter

Methods

close() → Future<bool>

Attempts to close the modal.

override

ngAfterViewInit() → void

ngOnDestroy() → void

Executed before the directive is removed from the DOM and destroyed.

noSuchMethod(Invocation invocation) → dynamic

Invoked when a nonexistent method or property is accessed.

inherited

open() → Future<bool>

Attempts to open the modal.

override

toString() → String

A string representation of this object.

inherited

Operators

operator ==(Object other) → bool

The equality operator.

inherited