@natec/mef-dev-ui-kit documentation
  1. Components
  2. FillComponent

File

src/lib/markup-kit/modals/fill/fill.component.ts

Description

Fill Component for a modal window.

Example of usage:

<mefdev-fill-modal #pin_modal>
  <!-- Modal header content -->
  <ng-template #modal_header>
    <!-- Header content goes here -->
  </ng-template>

  <!-- Modal footer content -->
  <ng-template #modal_footer>
    <!-- Footer content goes here -->
  </ng-template>
</mefdev-fill-modal>

https://mef.dev/ui_kit_demo/view/page_components/modals/fill

Implements

OnInit

Metadata

selector mefdev-fill-modal
styleUrls ./fill.component.scss
templateUrl ./fill.component.html

Index

Properties
Methods
Inputs
Outputs
Accessors

Constructor

constructor()

Inputs

show
Type : boolean

Input parameter that determines whether to show the modal window.

Outputs

visibleChange
Type : EventEmitter

Event emitted when the modal is change state. Emits a boolean value indicating if the modal is closed(false), or open(true). Example:

<mefdev-fill-modal (visibleChange)="onModalClosed($event)"></mefdev-fill-modal>

Methods

getModalState
getModalState()

Shows the modal state. Return a boolean value indicating if the modal is closed(false), or open(true)

Returns : boolean
Public hideModal
hideModal()

Hides the modal. Call this method to close the modal window.

Returns : void
Public showModal
showModal()

Shows the modal. Call this method to open the modal window.

Returns : void

Properties

Protected Optional dialog
Type : ElementRef
Decorators :
@ViewChild('dialog', {static: false})
modal_footer
Type : TemplateRef<void>
Decorators :
@ContentChild('modal_footer')

The footer template of the modal window.

<mefdev-fill-modal #pin_modal>
  <ng-template #modal_footer>
    <!-- Footer content goes here -->
  </ng-template>
</mefdev-fill-modal>
modal_header
Type : TemplateRef<void>
Decorators :
@ContentChild('modal_header')

The header template of the modal window.

<mefdev-fill-modal #pin_modal>
  <ng-template #modal_header>
    <!-- Header content goes here -->
  </ng-template>
</mefdev-fill-modal>
Protected visible
Type : boolean
Default value : false

Accessors

show
setshow(val: boolean)

Input parameter that determines whether to show the modal window.

Parameters :
Name Type Optional
val boolean No
Returns : void

results matching ""

    No results matching ""