Modal

A classic modal overlay, in which you can include any content you want

To use a Modal component in your application, you need to import the BulmaModalModule by adding the following lines to your app.module.ts file.

import { BulmaModalModule } from 'ngx-bulma';

@NgModule({
  imports: [BulmaModalModule]
  // ...
})
export class AppModule {}

Basic Modal Details

The most basic Modal needs only of <bu-modal> element with some content. However, Bulma components provides a number of preset sections that you can use inside of <bu-modal>

Components	Description
`<bu-modal>`	Parent Modal Component
`<bu-modal-header>`	Modal Header
`<bu-modal-title>`	Modal Title
`<bu-modal-content>`	Modal content
`<bu-modal-footer>`	Bottom of the Modal

Property	Description
`[open]`	Property to check if modal is open or not

To use the Basic BulmaModal component in your Angular application. you need to add above modal elements sequentially in you HTML and you are ready to go.

<button buButton  (click)="toggleModal()">Launch modal</button>

<bu-modal [open]="isModalActive">
  <bu-modal-header>
    <bu-modal-title>
      Modal title
    </bu-modal-title>
    <button class="delete" aria-label="close" (click)="closeModal()"></button>
  </bu-modal-header>
  <bu-modal-content>
    <h1>Hello World</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices
      eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate
      semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.
    </p>
  </bu-modal-content>
  <bu-modal-footer>
    <button buButton theme="success">Save changes</button>
    <button buButton (click)="closeModal()">Cancel</button>
  </bu-modal-footer>
</bu-modal>

Bulma does not have any implemention to toggle the modal, so we need to implement custom methods for this functionality. Add the following code in your component file.

  isModalActive = false;
  toggleModal() {
    this.isModalActive = !this.isModalActive;
  }
  closeModal() {
    this.isModalActive = false;
  }