Angular Generic Modal

Customizable Angular modal

What is it?

@cristiansarghe/ng-generic-modal is a just-add-water customizable and lightweight Angular popup.

Installation

npm i @cristiansarghe/ng-generic-modal

Customization

Content

• The modal has 3 parts, driven by ng-templates: modalHeading, modalBody and modalActions. You can pass content to any of them in the following way:

<ng-generic-modal #modalReference>
    <ng-template #modalHeading>
        This is the heading
    </ng-template>

    <ng-template #modalBody>
        This is the modal body
    </ng-template>

    <ng-template #modalActions>
        <button>This is an action</button>
        <button>And this is another action</button>
    </ng-template>
</ng-generic-modal>

Opening and hiding

• Given modalReference a reference to the modal element, method modalReference.open() will open the popup.
• To hide the modal, it's enough to call modalReference.hide().
• To rely less on method calling, the modal-close directive allows picking one or more elements inside the modal templates that close the modal when clicked. Example:

<ng-generic-modal #modalReference>
    <ng-template #modalActions>
        <button modal-close (click)="myMethod()">Submit</button>
        <button modal-close>Cancel</button>
        <button>Options</button>
    </ng-template>
</ng-generic-modal>

In the above example, the Close button will just hide the modal, while the Submit button will run myMethod() and then hide the modal. The Options button will not hide the modal, as it doesn't have modal-close attached.

• NOTE: open method can receive a state of the modal (which can be any object or primitive value). That value can be accessed within the modal ng-templates by simply targeting the data variable:

<ng-generic-modal #modalReference>
    <ng-template #modalHeading let-data="data">  // Pass the variable to the template
        This is my name: {{data}}
    </ng-template>
</ng-generic-modal>

data can be accessed at any time, but it's pointless unless there's anything passed to .open(state)

data variable does NOT keep its value between popup sessions (gets erased on each .hide())

@Input()

Input	Type	Required	Description
hasBackdrop	boolean	Optional, default: true	Show a dark background behind the modal whenever it's open
customModalContainerClass	string	Optional, default: null	Add a custom class on modal container
closeOnBackdropClick	boolean	Optional, default: true	Allow closing modal by clicking outside (on the backdrop)
showCloseButton	boolean	Optional, default: true	Show or hide the top right X closing button

Output()

Output	Type	Payload type	Description
beforeOpen	EventEmitter<T>	The type of the passed state or undefined if there is no state	Event emitted before popup opens
afterOpen	EventEmitter<T>	The type of the passed state or undefined if there is no state	Event emitted after popup opens
beforeHide	EventEmitter<void>	undefined	Event emitted before popup hides
afterHide	EventEmitter<void>	undefined	Event emitted after popup hides