Modal component

The <day-modal> component provides a highly configurable modal dialog that overlays the main page content. It is designed to display important information, request user actions, or present focused content without leaving the current view. It exposes settings to control it's size and the content it displays.

Dependencies

'/core', '/overlay'

Import

import { DAYModalComponent } from '/modal';import { DAYModalHeaderComponent } from '/modal';
import { DAYModalBodyComponent } from '/modal';
import { DAYModalFooterComponent } from '/modal';

or using

import { DAYModalModule } from '/modal';

Selectors

Modal: day-modal

Modal header: day-modal-header

Modal body: day-modal-body

Modal footer: day-modal-footer

Installation and Usage

npm install @dayerlin-bustamante/modal

import { DAYModalComponent, DAYModalBodyComponent } from '@dayerlin-bustamante/modal';

<day-modal #modal>
    <day-modal-body>Content</day-modal-body>
</day-modal>

Injector

Injection token for providing the modal configuration.
This token is used to inject an instance of IDAYModalConfiguration into Angular components or services.

cssClasses - Optional array of CSS class names to apply to the modal.

size - The size of the modal. Can be 'small', 'medium', or 'large'.

Inputs

Not included

Output

Not included

Directives

Not included

Public methods

Method create in DAYModalService:

Creates and opens a new modal dialog.

component - The component or template to render inside the modal dialog.

anchor - The HTML element to which the modal is anchored.

config - Optional configuration for the modal dialog.

returns - A reference to the created dialog, allowing further interaction and control.

Description