Toggle Bulma Modal with Angular 5

BulmaToggleModal

Toggle Bulma Modal with Angular 5

component.html

<div class="modal" [ngClass]="{ 'is-active' : isModalActive }">
  <div class="modal-background" (click)="toggleModal()"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">Modal title</p>
      <button class="delete" aria-label="close" (click)="toggleModal()"></button>
    </header>
    <section class="modal-card-body">
      <!-- Content ... -->
    </section>
    <footer class="modal-card-foot">
      <button class="button is-success">Save changes</button>
      <button class="button" (click)="toggleModal()">Cancel</button>
    </footer>
  </div>
</div>

component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {

  isModalActive: boolean = false;

  constructor() { }

  ngOnInit() {
  }

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

}

Thank You For This ... I was looking for a solution like this