Topic: Modal Keyboard Issue and solution

mog5808 pro asked 6 years ago

Using the modals Angular2 i wanted to pass a configuration based on my requirements to the modal so i added the following to the modalDirective.ts
  public setConfiguration(config) {
    this._config = {
      backdrop: config.backdrop || true,
      keyboard: config.keyboard || true,
      focus: true,
      show: || true,
      ignoreBackdropClick: false
problem is the keyboard JUST NEVER WORKS so i had to change the OnEsc method to the following
  // todo: consider preventing default and stopping propagation
  public onEsc(): void {
    if (this.config.backdrop !== 'static') {
I do not like this hack, but it seems to be the only solution. Please give it a look and advice if there is a better solution. Cheers

Magdalena Obalska free answered 6 years ago

Look at our website, at modals section - we have added an API, so now everything should be much clearer. :)

mog5808 pro answered 6 years ago

Thanks did not know about the [config] Cheers

Magdalena Obalska free answered 6 years ago

Sure, here's an example of basic modal with [config]="{keyboard: false}" added to the main div, so it's not possible to close it when the escape key is pressed. You can change 'false' to 'true', of course.
<button md-ripple type="button" class="btn btn-primary relative" (click)="" ripple-radius>Basic Example</button>

<div bsModal #basicModal="bs-modal" [config]="{keyboard: false}" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myBasicModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close pull-right" aria-label="Close" (click)="basicModal.hide()">
                    <span aria-hidden="true">×</span>
                <h4 class="modal-title w-100" id="myModalLabel">Modal title</h4>
            <div class="modal-body">
            <div class="modal-footer flex-column">
                <button type="button" class="btn btn-secondary ml-auto" aria-label="Close" (click)="basicModal.hide()" ripple-radius>Close</button>
                <button md-ripple  type="button" class="btn btn-primary relative ml-auto" ripple-radius>Save changes</button>

mog5808 pro answered 6 years ago

Hello, Is there a way of passing the value of keyboard as i sometimes need it true and other times false Cheers

Magdalena Obalska free answered 6 years ago

Hi, there's no need to add your code in the modalDirective.ts file. Here's a short instruction for better solution: 1. open your typescript free folder, 2. open modals folder and find modalOptionsClass.ts file, 3. change declared modals options as you wish (keyboard: true/false).

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.


Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: No