# 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>
```Classes
- ModalComponent
Initializes the base parent directive with the component name used by the rendering engine.
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 119
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 818
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 111
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 809
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 104
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 801
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.
Record.<string, UIFunctionLike>
# handlers
Allows consumers to attach custom UI handler functions to the modal lifecycle and actions.
Event handlers registered on the modal instance.
Record.<string, UIFunctionLike>
# handlers
Allows consumers to attach custom UI handler functions to the modal lifecycle and actions.
Event handlers registered on the modal instance.
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 140
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 842
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 133
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 834
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 97
'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 793
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 66
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 757
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 126
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 826
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 154
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 858
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 147
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 850
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>
# parseInlineContent() → {void}
Converts DOM elements to HTML strings when needed and safely trusts the result for rendering.
Normalizes and sanitizes inline modal content.
- Does not return a value.
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>