Docs Quickstart Figma Flowbite
1.3.0
Getting started
Customize
Components
API Reference NEW
components / Class

ModalComponent

Decorators:@Component
Selectors:flowbite-modal
Extends:BaseComponent<ModalClass>
Implements:OnDestroy

No documentation has been provided.

See Also

Properties

NameTypeDescription
contentClasses
inherited from BaseComponent
Signal<TClass>

Computed signal storing the component classes used in its template

customStyle
ModelSignal<{ root?: { base?: string | undefined; } | undefined; wrapper?: { base?: string | undefined; position?: { [x: string]: string | undefined; 'bottom-center'?: string | undefined; 'top-center'?: string | undefined; 'top-left'?: string | undefined; 'top-right'?: string | undefined; 'center-left'?: string | undefined; center?: string | undefined; 'center-right'?: string | undefined; 'bottom-left'?: string | undefined; 'bottom-right'?: string | undefined; } | undefined; } | undefined; container?: { base?: string | undefined; size?: { [x: string]: string | undefined; sm?: string | undefined; md?: string | undefined; lg?: string | undefined; xl?: string | undefined; } | undefined; } | undefined; content?: { base?: string | undefined; } | undefined; }>

Set the custom style for this modal

flowbiteId
r
inherited from BaseComponent
WritableSignal<Guid>

Auto generated GUID for each flowbite-angular component

Its default value is 00000000-0000-0000-0000-000000000000, and is set to a random GUID inside the afterNextRender hook

injector
r
inherited from BaseComponent
Injector

Injector instance injected to be used as an injector context where there is no default one.

Example usage
public ngOnInit(): void {
  afterNextRender(
     () => {},
     { injector: this.injector }
  );
}
isDismissable
ModelSignal<boolean>

Set if the modal is dismissable

isOpen
ModelSignal<boolean>

Set if the modal is open

modalBodyChild
r
Signal<ModalBodyComponent>

The child ModalBodyComponent

modalFooterChild
r
Signal<ModalFooterComponent | undefined>

The child ModalFooterComponent

modalHeaderChild
r
Signal<ModalHeaderComponent | undefined>

The child ModalHeaderComponent

position
ModelSignal<keyof ModalPositions>

Set the modal position

size
ModelSignal<keyof ModalSizes>

Set the modal size

themeService
r
ModalThemeService

Service injected used to generate class

Methods

changeBackdrop()

No documentation has been provided.

Presentation
changeBackdrop(): void;
Returns
void

close()

No documentation has been provided.

Presentation
close(): void;
Returns
void

fetchClass()

implements BaseComponent

Function to load component's classes

Presentation
fetchClass(): ModalClass;
Returns
ModalClass

init()

overrides BaseComponent

Function loaded during OnInit lifecycle hook. It initialize requirments for the component.

Presentation
init(): void;
Returns
void

ngOnDestroy()

implements OnDestroy

No documentation has been provided.

Presentation
ngOnDestroy(): void;
Returns
void

ngOnInit()

inherited from BaseComponent

Initialize component.

A call to verify and init function is done. Then a new Guid is set in the afterNextRender hook.

Presentation
ngOnInit(): void;
Returns
void

onBackdropClick()

No documentation has been provided.

Presentation
onBackdropClick(event: MouseEvent): void;
Parameters
NameTypeDescription
event
MouseEvent
Returns
void

onKeydownHandler()

No documentation has been provided.

Presentation
onKeydownHandler(event: KeyboardEvent): void;
Parameters
NameTypeDescription
event
KeyboardEvent
Returns
void

open()

No documentation has been provided.

Presentation
open(): void;
Returns
void

toggle()

No documentation has been provided.

Presentation
toggle(): void;
Returns
void
Flowbite

© 2019-2024 Flowbite™ is a registered trademark. All Rights Reserved.