# UIB ModalModule

## Prequisites

Add the `ModalModule` module to your module imports:

```TS
import { ModalModule } from '@uib/angular';

@NgModule({
  imports: [
    // ...
    ModalModule,
    // ...
  ],
})
// ...
```

## UibModal

### Usage with ModalService

#### Using a TemplateRef

```TS
@ViewChild('myModal', { read: TemplateRef })
public myModal: TemplateRef<any>;

constructor(private readonly modalService: ModalService) {
}

public openModal() {
  this.modalService.open(this.myModal);
}
```

```HTML
<ng-template uibModal #myModal>
  <uib-modal-header>
    My Modal title
  </uib-modal-header>
  <uib-modal-content>
    Modal defined by ng-template.
  </uib-modal-content>
  <uib-modal-actions>
    <button uibButton uibModalClose>
      action 1
    </button>
  </uib-modal-actions>
</ng-template>
```

#### Using a custom component

```TS
@Component({
  selector: 'uib-example-modal',
  templateUrl: 'example-modal.component.html',
})
export class ExampleModalComponent {}

```

```HTML
<uib-modal-header>
  My example modal
</uib-modal-header>
<uib-modal-content>
  <p>My example content.</p>
</uib-modal-content>
<uib-modal-actions>
  <button uibButton [uibModalClose]="true">
    okay
  </button>
  <button uibButton variant="secondary" [uibModalClose]="false">
    cancel
  </button>
</uib-modal-actions>
```

> Add `ExampleModalComponent` to the entry components.

```TS
constructor(private readonly modalService: ModalService) {
}

public openModal() {
  this.modalService.open(ExampleModalComponent);
}
```

To get access to the modal data just inject the `ModalRef` into your custom component:

```
constructor(private readonly modalRef: ModalRef) {
  console.log(modalRef.data);
}
```

### Usage inside template

```HTML
<ng-template uibModal #myModal="modal">
  <uib-modal-header>
    My Modal title
  </uib-modal-header>
  <uib-modal-content>
    Modal defined by ng-template.
  </uib-modal-content>
  <uib-modal-actions>
    <button uibButton uibModalClose>
      action 1
    </button>
  </uib-modal-actions>
</ng-template>

<button (click)="myModal.open(<my_modal_config>)"></button>
```

### The `uibModalClose` directive

The `uibModalClose` directive is used to close the parent modal on click, you can return result data on close by providing the data as input for the directive.

```HTML
<button [uibModalClose]="{ myData: 1 }">
```

### The `uibModalDismiss` directive

The `uibModalDismiss` directive is used to dismiss the parent modal on click.

```HTML
<button uibModalDismiss>
```

### Confirm dialog

As a convenient method to open an confirm dialog, you can use the `confirm` method of the `ModalService`.

```TS
constructor(private readonly modalService: ModalService) {
}

public openConfirm() {
  this.modalService.confirm({
    title: 'My confirm',
    body: 'My confirm body',
  });
}
```

### Async data

If the `data` property of `ModalConfig` is an `Observable` the modal will subscribe to it and display a loading indicator if needed.

```TS
  modalService.open(MyModalComponent, {
    // ... other options
    data: of('async data').pipe(delay(1000))
  });
```