Modal

Modal is a dynamically rendered element that floats above the rest of a page's content, requiring user interaction before returning to the main application.

Usage

API

Components

DaffModalHeaderComponent

import { DaffModalHeaderComponent } from '@daffodil/design/modal'

@Component()
class DaffModalHeaderComponent {
  faXmark: IconDefinition = faXmark

  @Input() dismissible: boolean = true
}

Inputs

dismissible

boolean

Default	`true`
Description	Whether or not a modal is dismissible.

DaffModalContentComponent

import { DaffModalContentComponent } from '@daffodil/design/modal'

@Component()
class DaffModalContentComponent {}

DaffModalActionsComponent

import { DaffModalActionsComponent } from '@daffodil/design/modal'

@Component()
class DaffModalActionsComponent {}

DaffModalComponent

import { DaffModalComponent } from '@daffodil/design/modal'

@Component()
class DaffModalComponent implements AfterContentInit, AfterViewInit, OnDestroy, DaffOpenable {
  readonly closedAnimationCompleted$: this._closedAnimationCompleted.asObservable().pipe(delay(300)) = this._closedAnimationCompleted.asObservable().pipe(delay(300))
  get open(): boolean

  @Input() @HostBinding() toggled: boolean = false
}

Outputs

toggled

boolean

Default	–
Description	Controls whether the component is open.

Properties

closedAnimationCompleted$

this._closedAnimationCompleted.asObservable().pipe(delay(300))

Default	`this._closedAnimationCompleted.asObservable().pipe(delay(300))`
Description	Observable that emits when the close animation is completed.

open

boolean

Default	–
Description	Tracks the open state of the modal.

Directives

DaffModalTitleDirective

import { DaffModalTitleDirective } from '@daffodil/design/modal'

Title of a modal.

@Directive()
class DaffModalTitleDirective {}

DaffModalCloseDirective

import { DaffModalCloseDirective } from '@daffodil/design/modal'

The DaffModalCloseDirective is a helper directive that passes a click event to the button it's used with to close a modal. It needs to be implemented with the <button> HTML element to work. This helps to reduce code duplication.

@Directive()
class DaffModalCloseDirective {}

Services

DaffModalService

import { DaffModalService } from '@daffodil/design/modal'

@Injectable()
class DaffModalService {
  open(
    component: Type<any>
    configuration?: Partial<DaffModalConfiguration>
  ): DaffModalComponent
  close(component: DaffModalComponent): void
}

() Methods

Parameters

Parameter	`component: Type`
Description

Parameter	`configuration: Partial`
Description

Parameters

Parameter	`component: DaffModalComponent`
Description

Modules

DaffModalModule

Deprecated

import { DaffModalModule } from '@daffodil/design/modal'

@NgModule()
class DaffModalModule {}

Types

DaffModal

import { DaffModal } from '@daffodil/design/modal'

interface DaffModal {
  modal: ComponentRef<DaffModalComponent>
  overlay: OverlayRef
}

Properties

modal `ComponentRef<DaffModalComponent>`
The reference to the modal in question

overlay `OverlayRef`
The overlay associated with a given modal.