Package Exports

ng-peek-behind

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ng-peek-behind) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

NgPeekBehind

Utility directive to peek behind overlay panels and dialogs.

Usage

<div class="cdk-overlay-pane dialog">
    <!--Nested inside-->
    <button
        [libPeekBehind]="'cdk-overlay-pane'"
        [libPeekBehindTrigger]="showPanel"
    >
    </button>
</div>

Setting showPanel = false will fade away the dialog and showPanel = true will fade it in.

Inputs

Input	Type	Value	Default
libPeekBehind	`string`	Class to identify parent overlay dialog.	`'cdk-overlay-dialog'`
libPeekBehindTrigger	`boolean`	This input triggers the fade in/out transitions. `true` will fade in the dialog. `false` will fade out the dialog.	-

Fallback directive

libPeekBehind directive uses Angular's Animations and AnimationBuilder under the hood. In case you are not happy with the responsiveness, consider using libPeekBehindListener which relies on @HostListeners to do the job.

In libPeekBehindListener, the peeker will listen for mousedown event on the attached element to fade out and document:mouseup event to fade in, custom trigger cannot be configured -

Inputs

Input	Type	Value	Default
libPeekBehindListener	`string`	Class to identify parent overlay dialog.	`'cdk-overlay-dialog'`

Usage

<div class="cdk-overlay-pane dialog">
    <!--Nested inside-->
    <button
        [libPeekBehindListener]="'cdk-overlay-pane'"
    >
    </button>
</div>