Angular BsModal

BsModal is a modal dialog service provided by the ngx-bootstrap library for Angular. It allows you to display modal dialogs in your Angular application with ease.

BsModal provides a simple API for creating and managing modals, including:

• show(component: any, config?: ModalOptions): A method for showing a modal dialog with the specified component and configuration options. The component parameter specifies the component to be used as the content of the modal, and the config parameter is an optional object that can be used to configure various options for the modal.
• hide(): A method for hiding the currently displayed modal dialog.
• onHidden: An event that is emitted when the modal dialog is fully hidden and no longer visible on the screen.
• onHide: An event that is emitted when the modal dialog is about to be hidden, but is not yet fully hidden.
• onShow: An event that is emitted when the modal dialog is about to be shown, but is not yet fully shown.
• onShown: An event that is emitted when the modal dialog is fully shown and visible on the screen.

To use BsModal in your Angular application, you first need to import the ModalModule from ngx-bootstrap in your app.module.ts file. You can then inject the BsModalService into any component where you want to use modals.

Here’s an example of how to use BsModal to display a simple modal dialog:

import { Component } from '@angular/core';
import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';

@Component({
  selector: 'app-example-modal',
  template: `
    <div class="modal-header">
      <h4 class="modal-title">{{title}}</h4>
      <button type="button" class="close" (click)="bsModalRef.hide()">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      {{body}}
    </div>
  `
})
export class ExampleModalComponent {
  title: string;
  body: string;

  constructor(public bsModalRef: BsModalRef) {}
}

@Component({
  selector: 'app-example',
  template: `
    <button (click)="showModal()">Show Modal</button>
  `
})
export class ExampleComponent {
  constructor(private modalService: BsModalService) {}

  showModal() {
    const initialState = {
      body: 'This is the body of the modal',
      title: 'Modal Title'
    };

    const modalRef = this.modalService.show(ExampleModalComponent, {
      initialState,
      class: 'modal-dialog-centered'
    });
  }
}

In the above code, we first define an ExampleModalComponent that will be used as the content of the modal. The template of this component contains the HTML markup for the modal, including a title and body. We also define a ExampleComponent that contains a button that, when clicked, will show the modal.

In the showModal method of ExampleComponent, we first define an initialState object that contains the data to be passed to the modal component. We then call modalService.show to display the modal dialog, passing in the ExampleModalComponent as the modal content, the initialState object, and a class option to center the modal dialog on the screen.

That’s a brief overview of BsModal and how it can be used in your Angular application. There are many more options and features available, so be sure to check out the official ngx-bootstrap documentation for more information.