@anguless/angulux/dialog

dialog

1 declarations3 demos

import

import { DialogModule } from '@anguless/angulux/dialog';

Basic

Visibility is controlled by the visible property and its visibleChange output.

<agl-button label="Show" (onClick)="visible.set(true)" /><agl-dialog header="Edit Profile" [visible]="visible()" (visibleChange)="visible.set($event)" [style]="{ width: '25rem' }">    <p>Update your information and click Save when you are done.</p></agl-dialog>

Modal

A modal dialog blocks the page behind it and traps focus until it closes.

<agl-button label="Show modal" (onClick)="visible.set(true)" /><agl-dialog header="Confirm" [visible]="visible()" (visibleChange)="visible.set($event)" [modal]="true" [style]="{ width: '25rem' }">    <p>A modal dialog blocks the page behind it and traps focus until it closes.</p>    <ng-template #footer>        <agl-button label="Cancel" severity="secondary" [outlined]="true" (onClick)="visible.set(false)" />        <agl-button label="Confirm" (onClick)="visible.set(false)" />    </ng-template></agl-dialog>

Maximizable

Maximizable adds a header control that expands the dialog to the full viewport.

<agl-button label="Show maximizable" (onClick)="visible.set(true)" /><agl-dialog header="Report" [visible]="visible()" (visibleChange)="visible.set($event)" [modal]="true" [maximizable]="true" [style]="{ width: '30rem' }">    <p>Maximizable adds a control to the header that expands the dialog to the full viewport and back.</p></agl-dialog>

API

Generated from the committed corpus, which check:corpus holds to the built library.

Dialog

componentagl-dialog

Dialog is a container to display content in an overlay window.

Input	Type	Default	Description
hostName	string	not documented
header	string \| undefined	not documented	Title text of the dialog.
draggable	boolean	not documented	Enables dragging to change the position using header.
resizable	boolean	not documented	Enables resizing of the content.
contentStyle	any	not documented	Style of the content section.
contentStyleClass	string \| undefined	not documented	Style class of the content.
modal	boolean	not documented	Defines if background should be blocked when dialog is displayed.
closeOnEscape	boolean	not documented	Specifies if pressing escape key should hide the dialog.
dismissableMask	boolean	not documented	Specifies if clicking the modal background should hide the dialog.
rtl	boolean	not documented	When enabled dialog is displayed in RTL direction.
closable	boolean	not documented	Adds a close icon to the header to hide the dialog.
breakpoints	any	not documented	Object literal to define widths per screen size.
styleClass	string \| undefined	not documented	Style class of the component.
maskStyleClass	string \| undefined	not documented	Style class of the mask.
maskStyle	{ [klass: string]: any } \| null \| undefined	not documented	Style of the mask.
showHeader	boolean	not documented	Whether to show the header or not.
blockScroll	boolean	not documented	Whether background scroll should be blocked when dialog is visible.
autoZIndex	boolean	not documented	Whether to automatically manage layering.
baseZIndex	number	not documented	Base zIndex value to use in layering.
minX	number	not documented	Minimum value for the left coordinate of dialog in dragging.
minY	number	not documented	Minimum value for the top coordinate of dialog in dragging.
focusOnShow	boolean	not documented	When enabled, first focusable element receives focus on show.
maximizable	boolean	not documented	Whether the dialog can be displayed full screen.
keepInViewport	boolean	not documented	Keeps dialog in the viewport.
focusTrap	boolean	not documented	When enabled, can only focus on elements inside the dialog.
transitionOptions deprecated — since v21.0.0. Use `motionOptions` instead.	string	not documented	Transition options of the animation.
maskMotionOptions	MotionOptions \| undefined	not documented	The motion options for the mask.
motionOptions	MotionOptions \| undefined	not documented	The motion options.
closeIcon	string \| undefined	not documented	Name of the close icon.
closeAriaLabel	string \| undefined	not documented	Defines a string that labels the close button for accessibility.
closeTabindex	string	not documented	Index of the close button in tabbing order.
minimizeIcon	string \| undefined	not documented	Name of the minimize icon.
maximizeIcon	string \| undefined	not documented	Name of the maximize icon.
closeButtonProps	ButtonProps	not documented	Used to pass all properties of the ButtonProps to the Button component.
maximizeButtonProps	ButtonProps	not documented	Used to pass all properties of the ButtonProps to the Button component.
visible	boolean	not documented	Specifies the visibility of the dialog.
style	any	not documented	Inline style of the component.
position	'center' \| 'top' \| 'bottom' \| 'left' \| 'right' \| 'topleft' \| 'topright' \| 'bottomleft' \| 'bottomright'	not documented	Position of the dialog.
role	string	not documented	Role attribute of html element.
appendTo	HTMLElement \| ElementRef \| TemplateRef<any> \| 'self' \| 'body' \| null \| undefined \| any	'self'	Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
content property headerTemplate	TemplateRef<void> \| undefined	not documented	Header template.
contentTemplate	TemplateRef<void> \| undefined	not documented	Content template.
footerTemplate	TemplateRef<void> \| undefined	not documented	Footer template.
closeIconTemplate	TemplateRef<void> \| undefined	not documented	Close icon template.
maximizeIconTemplate	TemplateRef<void> \| undefined	not documented	Maximize icon template.
minimizeIconTemplate	TemplateRef<void> \| undefined	not documented	Minimize icon template.
headlessTemplate	TemplateRef<void> \| undefined	not documented	Headless template.

Output	Type	Description
onShow	EventEmitter<any>	Callback to invoke when dialog is shown.
onHide	EventEmitter<any>	Callback to invoke when dialog is hidden.
visibleChange	EventEmitter<boolean>	This EventEmitter is used to notify changes in the visibility state of a component.
onResizeInit	EventEmitter<MouseEvent>	Callback to invoke when dialog resizing is initiated.
onResizeEnd	EventEmitter<MouseEvent>	Callback to invoke when dialog resizing is completed.
onDragEnd	EventEmitter<DragEvent>	Callback to invoke when dialog dragging is completed.
onMaximize	EventEmitter<any>	Callback to invoke when dialog maximized or unmaximized.

Template slot	Description
<ng-template #header>	Custom header template.
<ng-template #content>	Custom content template.
<ng-template #footer>	Custom footer template.
<ng-template #closeicon>	Custom close icon template.
<ng-template #maximizeicon>	Custom maximize icon template.
<ng-template #minimizeicon>	Custom minimize icon template.
<ng-template #headless>	Custom headless template.

Inherited from BaseComponent

inherited

Input	Type	Default	Description
dt	Object \| undefined	undefined	Defines scoped design tokens of the component.
unstyled	boolean \| undefined	undefined	Indicates whether the component should be rendered without styles.
pt	PT \| undefined	undefined	Used to pass attributes to DOM elements inside the component. TRUSTED INPUT ONLY. Whatever you put here is applied to the DOM as given: keys become attributes, and a key that names a DOM property is assigned to that property directly, with no sanitizer in between. That is what makes the API useful, and it means a value reaching it from a user, a database or a CMS can execute script. Treat it like markup you wrote yourself, not like data you received.
ptOptions	PassThroughOptions \| undefined	undefined	Used to configure passthrough(pt) options of the component.