Skip to main content

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:

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

Customization#

You can provide your own modal component by the CustomTemplatesService

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


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


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

Did you find this page helpful?