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?