/ng-peek-behind

Utility Angular directive to peek behind overlay panels and dialogs

Primary LanguageTypeScriptMIT LicenseMIT

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>