### File

`packages/ecl/components/ecl-modal/ecl-modal.component.ts`

### Extends

`ECLBaseDirective`

### Implements

`OnChanges` `AfterContentInit` `OnDestroy`

### Metadata

selector | `dialog[eclModal]`
imports | `A11yModule`
templateUrl | `./ecl-modal.component.html`

### Index

###### Properties
eclModalCloseComponents eclModalHeader
###### Methods
closeModal onEscapeKeydownHandler openModal getCssClasses
###### Inputs
isOpen size variant class e2eAttr tabindex
###### Outputs
modalClose modalOpen
###### HostBindings
attr.open class
###### HostListeners
document:keydown.escape
###### Accessors
isOpen isModalOpened cssClasses

### Inputs

isOpen
Type : `boolean | any`
Controls whether the modal is open. Can be set to any truthy value to open the modal.

size
Type : `"s" | "m" | "l" | "full" | string`
Default value : `'l'`
Defines the size of the modal. Possible values: 's' – small 'm' – medium 'l' – large (default) 'full' – full width

variant
Type : `"information" | "success" | "warning" | "error" | string`
Defines the visual variant of the modal. Possible values: 'information', 'success', 'warning', 'error', or a custom string.

class
Type : `string`

e2eAttr
Type : `any`

tabindex
Type : `number`

### Outputs

modalClose
Type : `EventEmitter`
Emits when the modal is closed. Carries an instance of `EclModalCloseEvent`.

modalOpen
Type : `EventEmitter`
Emits when the modal is opened. Carries an instance of `EclModalOpenEvent`.

### HostBindings

attr.open
Type : `boolean`
Binds the `open` attribute to the modal element. Used by the native `<dialog>` element.

class
Type : `string`
Applies base and variant CSS classes to the modal element.

### HostListeners

document:keydown.escape
`document:keydown.escape()`
Handles ESC key press to close the modal with `cancel` role.

### Methods

closeModal
`closeModal(result?: EclModalResult<T>)`
Closes the modal and emits a `modalClose` event with optional result data. If the event is not prevented, the modal will be hidden. Parameters :
Name | Type | Optional
result | `EclModalResult<T>` | Yes
Returns : `void`

onEscapeKeydownHandler
`onEscapeKeydownHandler()`
Decorators : `@HostListener('document:keydown.escape')`
Handles ESC key press to close the modal with `cancel` role. Returns : `void`

openModal
`openModal()`
Opens the modal and emits a `modalOpen` event. If the event is not prevented, the modal will be displayed. Returns : `void`

getCssClasses
`getCssClasses(rootClass: string)`
Parameters :
Name | Type | Optional
rootClass | `string` | No
Returns : `string`

### Properties

eclModalCloseComponents
Type : `QueryList<EclModalCloseDirective<T>>`
Decorators : `@ContentChildren(undefined, {descendants: true})`
All close directives projected inside the modal.

eclModalHeader
Type : `EclModalHeaderComponent<T>`
Decorators : `@ContentChild(undefined)`
Header component projected into the modal.

### Accessors

isOpen
get `isOpen()`
Returns the open state of the modal. Returns : `boolean | null`
set `isOpen(value: boolean | any)`
Controls whether the modal is open. Can be set to any truthy value to open the modal. Parameters :
Name | Type | Optional
value | `boolean | any` | No
Returns : `void`

isModalOpened
get `isModalOpened()`
Binds the `open` attribute to the modal element. Used by the native `<dialog>` element. Returns : `boolean`

cssClasses
get `cssClasses()`
Applies base and variant CSS classes to the modal element. Returns : `string`

# results matching ""

# No results matching ""