Modal

Pastanaga provides a full system allowing you to create and manage your modals as you wish.

It also provides a method opening a confirmation dialog and two predefined kinds of modal component ready to be used:

- `ModalDialogComponent` contains:
- - an optional image
  - a title
  - an optional description
  - a content
  - a footer
- `ModalAdvancedComponent` is a modal with a closing button containing:
- - a title
  - a content
  - a footer

Both modal dialog and modal advanced are displayed fullscreen on small viewport.

By default all dialogs are dismissable, meaning pressing escape key or clicking anywhere on the backdrop will dismiss the dialog and return false. This behavior can be changed by setting `dismissable` to false in the `ModalConfig` .

Modal dialog

Open a modal dialog

Modal advanced

Open a modal advanced With one button

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.