After spending countless hours grappling with the same issue, I finally found a solution that allows for multiple modals with unique bodies and functionalities while sharing common header and footer elements.
The key is to create a modal component with predefined header, footer, and basic button actions, along with a modal body where you can insert different content using ng-content. Here's an example:
<header class="modal-header">
<h5 class="modal-title">
{{ title }}
</h5>
<button type="button" class="btn-close" aria-label="Close window" (click)="dismiss()"></button>
</header>
<div class="modal-body">
<ng-content></ng-content>
</div>
<footer class="modal-footer">
<ng-template #readonly>
<app-close-btn (clicked)="dismiss()"></app-close-btn>
</ng-template>
<ng-container *ngIf="!isReadonly; else readonly">
<app-cancel-btn (clicked)="onDismiss ? onDismiss() : dismiss()"></app-cancel-btn>
<app-save-btn [disabled]="isCloseDisabled" (clicked)="onClose ? onClose() : close()"></app-save-btn>
</ng-container>
</footer>
export class ModalComponent {
@Input() activeModal?: NgbActiveModal;
...
}
Then, create a component with the desired body content and use the above modal as its base.
export class YourModalBodyComponent extends ModalComponent {
constructor(readonly activeModal: NgbActiveModal) {
super();
}
}
<app-modal [activeModal]="activeModal" [title]="'Selecting study program'">
This is your modal body
</app-modal>
Finally, open the modal using NgbModal.
The alternative approach involves creating a Modal class with shared logic, injecting NgbActiveModal, and utilizing ModalHeader and ModalFooter components in each individual modal. Unfortunately, most tutorials and demos I came across did not offer this level of template and logic reusability.