ArticleZip > Angularjs Bootstrap Modal Closing Call When Clicking Outside Esc

Angularjs Bootstrap Modal Closing Call When Clicking Outside Esc

Have you ever used a Bootstrap modal in your Angular project and wondered how to handle the closing call when users click outside or press the 'Esc' key? In this article, we’ll walk you through how you can easily achieve this functionality with AngularJS.

Firstly, let's set up our Bootstrap modal in the HTML template. Make sure you have included the necessary Bootstrap CSS and JavaScript files in your project. In your HTML file, create the modal structure like this:

Html

<div class="modal fade" role="dialog" id="exampleModal" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal Title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <!-- Modal content goes here -->
      </div>
    </div>
  </div>
</div>

Next, in your Angular component file, to close the modal when users click outside of it or press the 'Esc' key, you can use Angular's `ElementRef` and `HostListener`. Here is how you can achieve this:

Typescript

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

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.css']
})
export class ModalComponent {
  constructor(private el: ElementRef) {}

  @HostListener('document:click', ['$event'])
  onClick(event: Event): void {
    if (!this.el.nativeElement.contains(event.target)) {
      this.closeModal();
    }
  }

  @HostListener('document:keydown.escape', ['$event'])
  onKeydownHandler(event: KeyboardEvent): void {
    this.closeModal();
  }

  private closeModal(): void {
    document.getElementById('exampleModal').classList.remove('show');
    document.getElementById('exampleModal').setAttribute('aria-hidden', 'true');
  }
}

In the code snippet above, we are using Angular's `ElementRef` to access the modal element in the DOM. The `@HostListener` decorator is used to listen for `click` events outside the modal and `keydown.escape` events to handle the 'Esc' key press. When these events occur, the `closeModal()` function is called to close the modal by removing the `show` class and setting `aria-hidden` attribute to `true`.

And that’s it! With just a few lines of code, you can now easily handle the closing call of a Bootstrap modal when users interact outside of it or press the 'Esc' key in your Angular project. Implementing this functionality enhances the user experience and makes your modal more user-friendly.

We hope this article has been helpful to you in understanding how to achieve this behavior. Feel free to customize and enhance this solution to fit your specific requirements and make your Angular application even more interactive. Happy coding!

Related posts:

×