Adding directives to simplify ngx-bootstrap modal - ngx-bootstrap

Question

This is a suggestion to simplify the basic usages of ngx-bootstrap modal.
The idea is to use 2 directives:
bsDismissModal
replaces bootstrap data-dismiss="modal" attribute
works with "OK" button too, delaying the modal closing to pre-handle button click event
[bsToggleModal]="modalTemplate"
replaces both bootstrap data-toggle="modal" and data-target="#exampleModal" attributes
takes the ng-template reference as input value
Usage example:
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" [bsToggleModal]="exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<ng-template #exampleModal>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" bsDismissModal>×</button>
<h5 class="modal-title">Modal title</h5>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" bsDismissModal>Cancel</button>
<button type="button" class="btn btn-primary" (bsDismissModal)="save($event)">Save</button>
</div>
</div>
</div>
</div>
</ng-template>

Answer 1

A simple approach would be to use the BsModalService:
DismissModalDirective
import { Directive, EventEmitter, HostListener,
Inject, Output } from '#angular/core';
import { DOCUMENT } from '#angular/common';
import { BsModalService } from 'ngx-bootstrap/modal';
#Directive({
selector: '[dapDismissModal]'
})
export class DismissModalDirective {
// tslint:disable-next-line:no-output-rename
#Output('dapDismissModal') modalClosed = new EventEmitter<MouseEvent>();
private get modalsCount() {
return this.modalService.getModalsCount();
}
constructor(
private readonly modalService: BsModalService,
#Inject(DOCUMENT) private readonly document: Document
) {}
#HostListener('click', ['$event'])
hideModal(click: MouseEvent) {
this.modalClosed.emit(click);
if (click.defaultPrevented) {
return;
}
this.modalService.hide(this.modalsCount);
// Fix BsModalService
if (this.modalsCount === 0) {
this.document.body.classList.remove('modal-open');
}
}
}
(dismissModal)="handleClick($event)" replaces (click)="handleClick($event)", $event being the click MouseEvent.
Modal closing can be cancelled when preventing the click: event.preventDefault();.
ToggleModalDirective
import { Directive, HostListener, Input, TemplateRef } from '#angular/core';
import { BsModalService, ModalOptions } from 'ngx-bootstrap/modal';
#Directive({
selector: '[bsToggleModal]'
})
export class ToggleModalDirective {
// tslint:disable-next-line:no-input-rename
#Input('bsToggleModal') content: TemplateRef<any>;
#Input() bsModalConfig: ModalOptions;
constructor(private readonly modalService: BsModalService) {}
#HostListener('click')
showModal() {
this.modalService.show(this.content, this.bsModalConfig);
}
}