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.
import { DaffModalHeaderComponent } from '@daffodil/design/modal'
@Component()
class DaffModalHeaderComponent {
faXmark: IconDefinition = faXmark
@Input() dismissible: boolean = true
}
boolean| Default | true |
|---|---|
| Description | Whether or not a modal is dismissible. |
import { DaffModalContentComponent } from '@daffodil/design/modal'
@Component()
class DaffModalContentComponent {}
import { DaffModalActionsComponent } from '@daffodil/design/modal'
@Component()
class DaffModalActionsComponent {}
import { DaffModalComponent } from '@daffodil/design/modal'
@Component()
class DaffModalComponent implements AfterContentInit, AfterViewInit, OnDestroy, DaffOpenable {
ariaLabelledBy: string
animationCompleted: EventEmitter<any> = new EventEmitter<any>()
readonly closedAnimationCompleted$: this._closedAnimationCompleted.asObservable() = this._closedAnimationCompleted.asObservable()
get open(): boolean
@Input() @HostBinding() toggled: boolean = false
attachContent(portal: ComponentPortal<any>): any
@HostListener() animationDone(e: AnimationEvent): void
reveal(): void
hide(): void
toggle(): void
}
boolean| Default | – |
|---|---|
| Description | Controls whether the component is open. |
string| Default | – |
|---|---|
| Description |
EventEmitter<any>| Default | new EventEmitter<any>() |
|---|---|
| Description | Event fired when the close animation is completed. |
this._closedAnimationCompleted.asObservable()| Default | this._closedAnimationCompleted.asObservable() |
|---|---|
| Description | Observable that emits when the close animation is completed. |
boolean| Default | – |
|---|---|
| Description |
anyHelper method to attach portable content to modal.
| Parameter | portal: ComponentPortal |
|---|---|
| Description |
voidAnimation event that can used to hook into when animations are fully completed. We use this in the DaffModalService to determine when to actually remove the dynamically rendered element from the DOM so that the animation does not clip as the element is removed.
| Parameter | e: AnimationEvent |
|---|---|
| Description |
voidReveals the modal
voidHides the modal
voidToggles the visibility of the modal
import { DaffModalTitleDirective } from '@daffodil/design/modal'
Title of a modal.
@Directive()
class DaffModalTitleDirective {}
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 {}
import { DaffModalService } from '@daffodil/design/modal'
@Injectable()
class DaffModalService {
open(
component: Type$1<any>
configuration?: Partial<DaffModalConfiguration>
): DaffModalComponent
close(component: DaffModalComponent): void
}
| Parameter | component: Type$1 |
|---|---|
| Description |
| Parameter | configuration: Partial |
|---|---|
| Description |
void| Parameter | component: DaffModalComponent |
|---|---|
| Description |
import { DaffModalModule } from '@daffodil/design/modal'
@NgModule()
class DaffModalModule {}
import { DaffModal } from '@daffodil/design/modal'
interface DaffModal {
modal: ComponentRef$1<DaffModalComponent>
overlay: OverlayRef
}
modal ComponentRef$1<DaffModalComponent> |
|---|
The reference to the modal in question |
overlay OverlayRef |
|---|
The overlay associated with a given modal. |