ui-modal

Generation

ng g @ngx-kit/collection:ui-modal [name]

README

Modal window with optional header and footer.

Demo

PreviewSources

Default modal

Show modal component using the service

Declare modal in the stand-alone component and control it with service.

Do not forget to define the modal component in `entryComponents`.

Show modal component using template

Declare modal in the stand-alone component and control it in the template.

Data-binding

Interaction with service-hosted modal.

Input:
Output:

canClose guard

Prevent closing by guard-method.

Works only for service-hosted modals.

Sizes

API

[class] UiModalDemoBindingModalComponent

@Component

Selector:'ui-modal-demo-binding-modal'

Members

SignatureDescription
@Input() inputField: string
@Output() outputField = new EventEmitter<string>()
close()
closeWith(value: string)

[class] UiModalDemoCanCloseModalComponent

@Component

Selector:'ui-modal-demo-can-close-modal'

Members

SignatureDescription
closable = false
close()
canClose()

[class] UiModalDemoModalComponent

@Component

Selector:'ui-modal-demo-modal'

Members

SignatureDescription
@Input() size: UiModalSize = 'm'
close()

[class] UiModalDemoModule

@NgModule

[class] UiModalFooterComponent

@Component

Selector:'ui-modal-footer'

[class] UiModalModule

@NgModule

Exports:[ KitModalModule, KitOverlayModule, UiModalComponent, UiModalFooterComponent, ]

[class] UiModalComponent

@Component

Selector:'ui-modal'

Members

SignatureDescription
@Input() header: string
@Input() size: UiModalSize = 'm'
close()