Modal

Modal is a custom component to display a popup

Import


import {{'{'}}FuiModalModule{{'}'}} from 'fuel-ui'; //module
import {{'{'}}Modal{{'}'}} from 'fuel-ui'; //class

Getting Started

Modal is a custom element to create a popup

Usage


<button class="btn btn-primary" (click)="modal.showModal(true)">Toggle Modal</button>
<modal #modal
    modalTitle="Modal Title"
    [closeButton]="true"
    [closeOnUnfocus]="true"
    size="lg"
    (close)="onClose()"
    (open)="onOpen()">
    <div class="modal-body">
        <ul>
            <li>Any</li>
            <li>Html</li>
            <li>Here</li>
        </ul>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-primary" (click)="modal.closeModal()">
            <i class="fa fa-chevron-left"></i> Go Back
        </button>
    </div>
</modal>


export class ModalExample {{'{'}}
    onClose(){{'{'}}
        console.log("Modal has been closed!");
    {{'}'}}
    onOpen(){{'{'}}
        console.log("Modal has been opened!");
    {{'}'}}
{{'}'}}

Attributes

Loading table...

Events

Loading table...