# new ModalComponent()
This component provides a flexible and reusable modal dialog implementation for Angular applications. It supports dynamic content rendering, customizable options, and event handling for modal lifecycle events. The modal can be used for various purposes, such as displaying forms, lightboxes, or selection dialogs.
Modal component for displaying dynamic content in a modal dialog.
Example
```typescript
<ngx-decaf-modal [isOpen]="true" [title]="'Example Modal'"></ngx-decaf-modal>
```Members
boolean
# borders
When set to true, border styles are applied according to inherited component styling rules; when false, border rendering is disabled.
Controls whether modal content renders with visual borders.
- Default Value:
- true
View Source lib/components/modal/modal.component.ts, line 112
boolean
# borders
When set to true, border styles are applied according to inherited component styling rules; when false, border rendering is disabled.
Controls whether modal content renders with visual borders.
- Default Value:
- true
View Source lib/components/modal/modal.component.ts, line 692
DomSanitizer
# domSanitizer
Used to sanitize dynamic HTML content, ensuring it is safe to render in the DOM.
Sanitizer instance for bypassing security and sanitizing HTML content.
DomSanitizer
# domSanitizer
Used to sanitize dynamic HTML content, ensuring it is safe to render in the DOM.
Sanitizer instance for bypassing security and sanitizing HTML content.
boolean
# expandable
When set to true, the modal can be expanded.
Enables expandable mode for the modal.
- Default Value:
- false
View Source lib/components/modal/modal.component.ts, line 104
boolean
# expandable
When set to true, the modal can be expanded.
Enables expandable mode for the modal.
- Default Value:
- false
View Source lib/components/modal/modal.component.ts, line 683
boolean
# expanded
When set to true, the modal displays in an expanded state; when false, it is collapsed or in its default size.
Indicates whether the modal content is expanded.
boolean
# expanded
When set to true, the modal displays in an expanded state; when false, it is collapsed or in its default size.
Indicates whether the modal content is expanded.
boolean
# fullscreen
When set to true, the modal occupies the entire screen.
Enables fullscreen mode for the modal.
- Default Value:
- false
View Source lib/components/modal/modal.component.ts, line 97
boolean
# fullscreen
When set to true, the modal occupies the entire screen.
Enables fullscreen mode for the modal.
- Default Value:
- false
View Source lib/components/modal/modal.component.ts, line 675
KeyValue
|
undefined
# globals
Stores global settings that can be accessed within the modal instance.
Global key-value pairs for modal configuration.
KeyValue
|
undefined
# globals
Stores global settings that can be accessed within the modal instance.
Global key-value pairs for modal configuration.
Color
# headerBackground
Controls the Ionic color used for the modal header background.
Sets the background color of the modal header.
- Default Value:
- 'transparent'
View Source lib/components/modal/modal.component.ts, line 133
Color
# headerBackground
Controls the Ionic color used for the modal header background.
Sets the background color of the modal header.
- Default Value:
- 'transparent'
View Source lib/components/modal/modal.component.ts, line 716
boolean
# headerTransparent
When set to true, the modal header is rendered with a transparent background.
Controls the transparency of the modal header.
- Default Value:
- false
View Source lib/components/modal/modal.component.ts, line 126
boolean
# headerTransparent
When set to true, the modal header is rendered with a transparent background.
Controls the transparency of the modal header.
- Default Value:
- false
View Source lib/components/modal/modal.component.ts, line 708
Color
# iconColor
Controls the Ionic color of icons rendered in the modal (for example, in the header or action buttons).
Defines the color used for icons within the modal.
Color
# iconColor
Controls the Ionic color of icons rendered in the modal (for example, in the header or action buttons).
Defines the color used for icons within the modal.
string
|
SafeHtml
|
undefined
# inlineContent
Specifies the HTML or SafeHtml content to be rendered inside the modal.
Inline content to be displayed in the modal.
string
|
SafeHtml
|
undefined
# inlineContent
Specifies the HTML or SafeHtml content to be rendered inside the modal.
Inline content to be displayed in the modal.
'top'
|
'bottom'
# inlineContentPosition
Determines whether the inline content is displayed at the top or bottom of the modal.
Position of the inline content within the modal.
- Default Value:
- 'bottom'
View Source lib/components/modal/modal.component.ts, line 90
'top'
|
'bottom'
# inlineContentPosition
Determines whether the inline content is displayed at the top or bottom of the modal.
Position of the inline content within the modal.
- Default Value:
- 'bottom'
View Source lib/components/modal/modal.component.ts, line 667
boolean
# isOpen
Controls the visibility of the modal dialog. When set to true, the modal is displayed.
Determines whether the modal is open.
- Default Value:
- false
View Source lib/components/modal/modal.component.ts, line 59
boolean
# isOpen
Controls the visibility of the modal dialog. When set to true, the modal is displayed.
Determines whether the modal is open.
- Default Value:
- false
View Source lib/components/modal/modal.component.ts, line 631
boolean
# lightBox
When set to true, the modal is displayed as a lightbox.
Enables lightbox mode for the modal.
- Default Value:
- false
View Source lib/components/modal/modal.component.ts, line 119
boolean
# lightBox
When set to true, the modal is displayed as a lightbox.
Enables lightbox mode for the modal.
- Default Value:
- false
View Source lib/components/modal/modal.component.ts, line 700
ModalOptions
|
undefined
# options
Allows customization of modal behavior and appearance through the ModalOptions interface.
Options for configuring the modal.
ModalOptions
|
undefined
# options
Allows customization of modal behavior and appearance through the ModalOptions interface.
Options for configuring the modal.
boolean
# showCloseButton
When true, the close (X) button renders in the header; when false, it is omitted.
Controls the visibility of the modal close button.
- Default Value:
- true
View Source lib/components/modal/modal.component.ts, line 147
boolean
# showCloseButton
When true, the close (X) button renders in the header; when false, it is omitted.
Controls the visibility of the modal close button.
- Default Value:
- true
View Source lib/components/modal/modal.component.ts, line 732
boolean
# showHeader
When set to true, the modal header is displayed; when false, it is hidden.
Controls the visibility of the modal header.
- Default Value:
- true
View Source lib/components/modal/modal.component.ts, line 140
boolean
# showHeader
When set to true, the modal header is displayed; when false, it is hidden.
Controls the visibility of the modal header.
- Default Value:
- true
View Source lib/components/modal/modal.component.ts, line 724
string
|
undefined
# tag
Provides a unique tag for identifying the modal instance.
Tag identifier for the modal.
string
|
undefined
# tag
Provides a unique tag for identifying the modal instance.
Tag identifier for the modal.
string
|
undefined
# title
Specifies the title text displayed in the modal header.
Title of the modal dialog.
string
|
undefined
# title
Specifies the title text displayed in the modal header.
Title of the modal dialog.
EventEmitter.<OverlayEventDetail>
# willDismissEvent
Emits an OverlayEventDetail object containing details about the dismiss event.
Event emitted when the modal is about to be dismissed.
EventEmitter.<OverlayEventDetail>
# willDismissEvent
Emits an OverlayEventDetail object containing details about the dismiss event.
Event emitted when the modal is about to be dismissed.
Methods
# async cancel() → {Promise.<void>}
This method is used to programmatically close the modal with a cancel action.
Cancels the modal and dismisses it with a cancel action.
- A promise that resolves when the modal is dismissed.
Promise.<void>
# async confirm(event) → {Promise.<void>}
This method is used to programmatically close the modal with a confirm action, passing optional event data.
Confirms the modal and dismisses it with a confirm action.
Parameters:
| Name | Type | Description |
|---|---|---|
event |
IBaseCustomEvent
|
The custom event containing data to pass during confirmation. |
- A promise that resolves when the modal is dismissed.
Promise.<void>
# async create(propsopt) → {Promise.<ModalComponent>}
Initializes the modal with the provided properties and displays it.
Creates and presents the modal.
Parameters:
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
props |
KeyValue
|
<optional> |
{} | Properties to initialize the modal. |
- A promise that resolves with the modal instance.
Promise.<ModalComponent>
# async handleEvent(event) → {Promise.<void>}
Stops event propagation and triggers confirm or cancel actions based on event data.
Handles custom events for the modal.
Parameters:
| Name | Type | Description |
|---|---|---|
event |
IBaseCustomEvent
|
The custom event to handle. |
- A promise that resolves when the event is handled.
Promise.<void>
# handleExpandToggle() → {void}
This method switches the modal between expanded and collapsed views and triggers change detection.
Toggles the expanded state of the modal content.
- Does not return a value.
void
# async handleWillDismiss(event) → {Promise.<OverlayEventDetail>}
This method is triggered when the modal is about to be dismissed. It emits the willDismissEvent with the event details.
Handles the modal dismiss event.
Parameters:
| Name | Type | Description |
|---|---|---|
event |
CustomEvent.<OverlayEventDetail>
|
The dismiss event containing overlay details. |
- A promise that resolves with the overlay event details.
Promise.<OverlayEventDetail>
# async ngOnInit() → {Promise.<void>}
Sets up the modal controller and sanitizes inline content if provided.
Lifecycle hook that initializes the modal component.
- A promise that resolves when initialization is complete.
Promise.<void>
# async prepare(optionsopt) → {Promise.<void>}
Merges default options with user-provided options and sets global configuration.
Initializes the modal with the provided options.
Parameters:
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
options |
KeyValue
|
<optional> |
{} | Additional options for modal initialization. |
- A promise that resolves when initialization is complete.
Promise.<void>
# async present() → {Promise.<void>}
Sets the modal's visibility to true and triggers change detection.
Presents the modal.
- A promise that resolves when the modal is presented.
Promise.<void>