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>