Modal Service for Angular and Bootstrap 5.
npm install --save ng-bs-modal-service
yarn add ng-bs-modal-service
import { NgBsModalServiceModule } from 'ng-bs-modal-service';
@NgModule({
declarations: [...],
imports: [NgBsModalServiceModule],
bootstrap: [...]
})
export class AppModule {}
Add in app-component.html
<ng-bs-modal-service></ng-bs-modal-service>
Data source:
constructor(private modalService: NgBsModalService) {}
showModal(modalBody: TemplateRef<any>) {
this.modalService.open({
header: 'Modal',
body: modalBody
}, {
customClass: { modalHeader: 'bg-danger text-white' }
})
}
In template:
<button type="button" class="btn btn-primary" (click)="showModal(modalBody)">Show Modal</button>
<ng-template #modalBody>
<img src="https://placehold.co/800x400" alt="placeholder">
</ng-template>
ModalService.open(content: NgBsModalServiceContent | TemplateRef<any>, options?: NgBsModalServiceOptions)
NgBsModalServiceContent {
body: TemplateRef<any> | string,
header?: TemplateRef<any> | string,
footer?: TemplateRef<any>
}
NgBsModalServiceOptions {
disabledBodyScroll?: boolean;
size?: 'sm' | 'lg' | 'xl',
staticBackdrop?: boolean,
withoutClose?: boolean,
customClass?: {
modal?: string;
modalHeader?: string,
modalBody?: string;
modalFooter?: string,
}
}