# 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
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
# 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 96
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 466
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.
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 110
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 89
'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 458
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 58
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 422
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 103
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 474
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
# 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 117
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 482
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>
# 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 initialize(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 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 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>