Pastanaga is providing two ready to use modal components: ModalDialogComponent and ModalAdvancedComponent .

You can also create your own modal components.

Using ModalDialogComponent or ModalAdvancedComponent

First you need to create a component. A ModalRef can be injected to control the modal from within the component.

{{dialogComponent}}

In its template, for common/core functionality, use a pa-modal-dialog or a pa-modal-advanced

{{dialogTemplate}}

This component being setup, you can then display it using Pastanaga's ModalService

{{callerComponent}}

Creating your own modal component

To create a modal from scratch, you first need to create a component extending BaseModalComponent .

{{customModalComponent}}

In its template, you must identify the modal container with #modalContainer . You can also use pastanaga's classes to take advantage of pastanaga's style and animations. And last but not least, you can use pastanaga's modal directives to setup content location for your modal.

{{customModalTemplate}}

From there, you can use your own modal the same way you would do with Pastanaga's ModalDialogComponent and ModalAdvancedComponent

Modal configuration

By default, all modal are dismissable. The configuration object allows to change this default behaviors and to pass some data to the component:

ModalConfig

dismissable

When false , modal won't close when the user press escape key or clicks outside the modal. (Default: true)

Modal configuration can be setup when opening the modal: openModal 's second parameter is an optional configuration object ( ModalConfig ).

{{openModalConfig}}

You can also change the modal configuration on the component extending BaseModalComponent :

{{modalCloseButtonSetup}}

Closing behavior

Collect data returned by the modal

openModal method returns a ModalRef object which provides an onClose observable. Subscribing to this observable allows to collect data returned by the modal when closing.

{{collectDataOnClose}}

Pastanaga's modals returns false when clicking outside, as well as ModalAdvancedComponent 's close button.

Closing a modal programmatically

Any modal can be closed programmatically through their modal property:

{{closingProgrammatically}}

Passing data to a modal

Sometimes, a modal's caller needs to pass some data to it. You can easily do so by adding the data property to the ModalConfig when opening the modal:

{{passingDataToModal}}

The modal can access the data by using the data InjectionToken , for example in their ngOnInit block

{{accessingModalData}}

Key binding

A modal with withCloseButton set in its ModalConfig will close when pressing ESC.

If you need to bind the ENTER key to do something, you can use onEnter property of your modal:

{{onEnterBinding}}

Change detection

Modal components provided by Pastanaga ( ModalAdvancedComponent and ModalDialogComponent ) use OnPush change detection strategy. If you change some values of these modals from the outside, you will need to trigger a change detection cycle in the modal. BaseModalComponent provides the method refresh which does exactly that.

Styling footer buttons

In case you want to have only two buttons on the footer of a modal you need to provide the css class .pa-dual-buttons to the footer.