Справочник API

Вот полный контракт modal: всё, что можно привязать, прослушать, спроецировать и тематизировать, собрано в одном месте. Подключите то, что нужно, и оформите так, как хотите — это standalone и дружит с сигналами.

Входные свойства

Настройте modal с помощью 14 входных свойств. Привязывайте их, как любой @Input в Angular.

Имя	Тип	По умолчанию	Описание
`animation`	`boolean`	—	Если true, открытие и закрытие modal будут анимированы. По умолчанию: true
`backdrop`	`boolean \| "static"`	—	Если true, будет создан элемент backdrop. В качестве альтернативы укажите "static" для backdrop, который не закрывает modal при клике. По умолчанию: true
`centered`	`boolean`	—	Если true, modal будет центрирован по вертикали. По умолчанию: false
`placement`	`HubModalPlacement`	—	Управляет тем, где размещается modal в области просмотра. По умолчанию: HubModalPlacement.Center
`keyboard`	`boolean`	—	Если true, modal будет закрыт при нажатии клавиши Escape. По умолчанию: true
`closeOnNavigation`	`boolean`	—	Если true, modal будет закрыт, когда пользователь переходит назад в истории браузера (history.back(), кнопка «Назад» браузера). По умолчанию: true
`size`	`"sm" \| "lg" \| "xl" \| string`	—	Размер окна modal
`windowClass`	`string`	—	Пользовательский класс, добавляемый к окну modal
`backdropClass`	`string`	—	Пользовательский класс, добавляемый к backdrop modal
`dismissSelector`	`string`	—	Пользовательский селектор для элементов, которые могут вызвать закрытие (dismiss) окна modal. По умолчанию: "[data-dismiss=\"modal\"]"
`closeSelector`	`string`	—	Пользовательский селектор для элементов, которые могут вызвать закрытие (close) окна modal. По умолчанию: "[data-close=\"modal\"]"
`headerSelector`	`string`	—	Пользовательский селектор для элемента заголовка окна modal
`footerSelector`	`string`	—	Пользовательский селектор для элемента подвала окна modal
`data`	`any`	—	Дополнительные данные, которые необходимо передать окну modal при его открытии

События

Реагируйте на то, что делает modal, — 1 событий, к которым можно подключить вашу логику.

Имя	Тип	Описание
`dismiss`	`any`	Испускается окном modal, когда пользователь отклоняет (dismiss) его — например, нажатием Escape, кликом по backdrop или встроенной кнопкой закрытия. Полезная нагрузка — причина отклонения (ModalDismissReasons.ESC, ModalDismissReasons.BACKDROP_CLICK или пользовательское значение).

Методы

Управляйте modal из кода — 17 методов его программного интерфейса.

Имя	Сигнатура	Возвращает	Описание
`HubModal.open`	`open<C, R, D>(content: Type<C> \| TemplateRef<any> \| string, options?: HubModalOptions<D>): HubModalRef<C, R>`	`HubModalRef<C, R>`	Открывает новое окно modal с указанным содержимым (тип компонента, TemplateRef или строка) и опциями и возвращает HubModalRef для управления им. Компоненты содержимого могут внедрить HubActiveModal и токен HUB_MODAL_DATA, чтобы взаимодействовать с modal и читать полезную нагрузку data.
`HubModal.dismissAll`	`dismissAll(reason?: any): void`	—	Отклоняет все отображаемые в данный момент окна modal с указанной причиной.
`HubModal.hasOpenModals`	`hasOpenModals(): boolean`	`boolean`	Показывает, есть ли в приложении открытые окна modal в данный момент.
`HubModal.activeInstances`	`activeInstances: EventEmitter<HubModalRef[]>`	`EventEmitter<HubModalRef[]>`	Эмиттер событий, испускающий список открытых в данный момент экземпляров HubModalRef при каждом открытии или удалении modal.
`HubModalRef.close`	`close(result?: R): void`	—	Закрывает modal с необязательным значением результата. Promise HubModalRef.result разрешается переданным значением.
`HubModalRef.dismiss`	`dismiss(reason?: any): void`	—	Отклоняет modal с необязательным значением причины. Promise HubModalRef.result отклоняется с переданным значением. Учитывает защиту beforeDismiss, если она настроена.
`HubModalRef.update`	`update(options: HubModalUpdatableOptions): void`	—	Обновляет опции открытого modal (aria-атрибуты, centered, placement, fullscreen, backdropClass, size, variant, windowClass, modalDialogClass).
`HubModalRef.componentInstance`	`componentInstance: C \| void`	`C \| void`	Экземпляр компонента, использованного как содержимое modal. Возвращает undefined, если содержимым был TemplateRef или modal закрыт.
`HubModalRef.result`	`result: Promise<R>`	`Promise<R>`	Promise, который разрешается результатом закрытия, когда modal закрывается, и отклоняется причиной отклонения, когда modal отклоняется (dismiss).
`HubModalRef.closed`	`closed: Observable<R>`	`Observable<R>`	Observable, испускающий результат, переданный в close(), когда modal закрывается.
`HubModalRef.dismissed`	`dismissed: Observable<any>`	`Observable<any>`	Observable, испускающий причину отклонения, когда modal отклоняется — значение, переданное в dismiss(), либо внутреннюю причину, такую как клик по backdrop или Escape.
`HubModalRef.shown`	`shown: Observable<void>`	`Observable<void>`	Observable, который испускает значение и завершается, как только modal полностью видим и его анимация открытия закончилась.
`HubModalRef.hidden`	`hidden: Observable<void>`	`Observable<void>`	Observable, который испускает значение и завершается, когда и окно modal, и backdrop скрыты, анимации завершены, а их элементы удалены из DOM.
`HubActiveModal.close`	`close(result?: R): void`	—	Закрывает modal, содержащий компонент содержимого, разрешая Promise HubModalRef.result необязательным значением результата.
`HubActiveModal.dismiss`	`dismiss(reason?: any): void`	—	Отклоняет modal, содержащий компонент содержимого, отклоняя Promise HubModalRef.result необязательным значением причины.
`HubActiveModal.update`	`update(options: HubModalUpdatableOptions): void`	—	Обновляет опции открытого modal изнутри компонента содержимого.
`HubActiveModal.data`	`data: D`	`D`	Типизированная полезная нагрузка, переданная через HubModalOptions.data. Эквивалентно внедрению токена HUB_MODAL_DATA; принимает значение null, если опция data не была передана.

Шаблоны

Сделайте его своим — 1 слотов шаблона позволяют проецировать собственную разметку.

Имя	Описание	Пример
`Modal Template`	Ссылка на шаблон, которую можно передать в modal service	`<ng-template #modalTemplate let-close="close" let-dismiss="dismiss"> <div class="modal-header"> <h4 class="modal-title">Modal Title</h4> </div> <div class="modal-body"> Modal content goes here </div> <div class="modal-footer"> <button class="btn btn-secondary" (click)="dismiss()">Cancel</button> <button class="btn btn-primary" (click)="close('result')">OK</button> </div> </ng-template>`