Modal

Modal is a dynamically rendered element that floats above the rest of a page's content. It can be especially useful for interstitials that require additional user feedback.

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 {
  @HostBinding() class: boolean = true
}

DaffModalActionsComponent

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

@Component()
class DaffModalActionsComponent {
  @HostBinding() class: boolean = true
}

DaffModalComponent

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

@Component()
class DaffModalComponent implements AfterContentInit, AfterViewInit, DaffOpenable {
  @HostBinding() modalClass: boolean = true
  @HostBinding() role: string = 'dialog'
  @HostBinding() ariaModal: boolean = true
  @HostBinding() ariaLabelledBy: string
  animationCompleted: EventEmitter<any> = new EventEmitter<any>()
  closedAnimationCompleted: EventEmitter<any> = new EventEmitter<
      any
    >()
  @HostBinding() 
  get fadeState(): string
  get open(): boolean

  ngAfterContentInit(): void
  ngAfterViewInit(): void
  attachContent(portal: ComponentPortal<any>): any
  @HostListener() animationDone(e: AnimationEvent_2): void
  reveal(): void
  hide(): void
  toggle(): void
}

Properties

modalClass

boolean

Default	`true`
Description	Sets a class of .daff-modal to the host element.

role

string

Default	`'dialog'`
Description	Sets the role to dialog.

ariaModal

boolean

Default	`true`
Description	Sets aria-modal to true.

ariaLabelledBy

string

Default	–
Description	The aria-labelledby for the modal. This is set by the id of `DaffModalTitleDirective` when it is used.

animationCompleted

EventEmitter<any>

Default	`new EventEmitter<any>()`
Description	Event fired when the close animation is completed.

closedAnimationCompleted

EventEmitter<any>

Default	`new EventEmitter< any >()`
Description	Event fired when the close animation is completed.

fadeState

string

Default	–
Description	Animation hook that controls the entrance and exit animations of the modal.

open

boolean

Default	–
Description

() Methods

Parameters

Parameter	`portal: ComponentPortal`
Description

Parameters

Parameter	`e: AnimationEvent_2`
Description

Directives

DaffModalTitleDirective

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

Title of a modal.

@Directive()
class DaffModalTitleDirective {
  @HostBinding() 
  get uniqueId(): string
}

Properties

uniqueId

string

Default	–
Description	The html `id` of the modal title.

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 {
  @HostBinding() typeAttribute: string = 'button'

  @HostListener() _onCloseModal(event: MouseEvent): void
}

Properties

typeAttribute

string

Default	`'button'`
Description	Sets the button type attribute to button.

() Methods

Parameters

Parameter	`event: MouseEvent`
Description

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.