# ModalComponent

> **Info:** This is release candidate documentation for **Stream Chat Angular SDK v8**. For the latest stable version, see the [latest version (v7)](https://getstream.io/chat/docs/sdk/angular/).

The `Modal` component displays its content in an overlay. The modal can be closed with a close button, if the user clicks outside of the modal content, or if the escape button is pressed. The modal can also be closed from outside.

## Basic usage

This example shows how to use the modal component

**Example 1** - simple modal:

```html
<stream-modal [(isOpen)]="isModalOpen">
  <!-- Modal content here -->
</stream-modal>
```

## Customization

You can provide your own modal component by the [`CustomTemplatesService`](https://getstream.io/chat/docs/sdk/angular/v8/services/CustomTemplatesService/)

[//]: # "Start of generated content"

## Inputs and outputs

### isOpen

**isOpen**: `boolean` = `false`

If `true` the modal will be displayed, if `false` the modal will be hidden

#### Defined in

[lib/modal/modal.component.ts:25](https://github.com/GetStream/stream-chat-angular/blob/8ed7ea67ea3deb96c2ae7fcccfd82bd32ad7f184/projects/stream-chat-angular/src/lib/modal/modal.component.ts#L25)

---

### content

**content**: `undefined` \| `TemplateRef<void>`

The content of the modal (can also be provided using `ng-content`)

#### Defined in

[lib/modal/modal.component.ts:29](https://github.com/GetStream/stream-chat-angular/blob/8ed7ea67ea3deb96c2ae7fcccfd82bd32ad7f184/projects/stream-chat-angular/src/lib/modal/modal.component.ts#L29)

---

### isOpenChange

`Readonly` **isOpenChange**: `EventEmitter<boolean>`

Emits `true` if the modal becomes visible, and `false` if the modal is closed.

#### Defined in

[lib/modal/modal.component.ts:33](https://github.com/GetStream/stream-chat-angular/blob/8ed7ea67ea3deb96c2ae7fcccfd82bd32ad7f184/projects/stream-chat-angular/src/lib/modal/modal.component.ts#L33)

[//]: # "End of generated content"

---

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/angular/v8/components/ModalComponent/](https://getstream.io/chat/docs/sdk/angular/v8/components/ModalComponent/).