# ModalComponent

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`](/chat/docs/sdk/angular/v4/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/2451bc8/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/2451bc8/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/2451bc8/projects/stream-chat-angular/src/lib/modal/modal.component.ts#L33)

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


---

This page was last updated at 2026-06-16T09:40:45.587Z.

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