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

  @Output() toggled: EventEmitter<boolean> = new EventEmitter<boolean>()
}

Outputs

toggled

EventEmitter

Default	–
Description	Event fired when a component is opened (true) or closed (false)

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<T>(
    component: Type<T>
    configuration?: Partial<DaffModalConfiguration>
  ): DaffModalRef<T>
  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

DaffModalRef

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

Reference to modal instance.

interface DaffModalRef<T> {
  instance: T
  afterClosed: Observable<boolean>

  close(): void
}

Properties

instance `T`
The component instance inside the modal.

afterClosed `Observable`
Emits when the modal close animation completes.