title: Prevent Bootstrap Modal close on Esc key press
body: <p>I am using NGX Bootstrap modal in my project. Inside the modal i have a form, right now if I press Esc key the modal is hiding.</p>
  
  <p>How can I be able to show child modal(confirm modal) if any user is filling up the form and suddenly press the esc key or tries to close the parent modal.</p>
  
  <p>Is there any way to show the child modal without closing the parent modal based on some condition if anyone presses the esc key.</p>
  
  <pre><code>    &lt;button type="button" class="btn btn-primary" (click)="parentModal.show()"&gt;Open parent modal&lt;/button&gt;
  
      &lt;!-- parent modal --&gt;
  
      &lt;div class="modal fade" bsModal #parentModal="bs-modal" tabindex="-1" role="dialog" aria-labelledby="dialog-nested-name1"&gt;
        &lt;div class="modal-dialog modal-lg"&gt;
          &lt;div class="modal-content"&gt;
            &lt;div class="modal-header"&gt;
              &lt;h4 id="dialog-nested-name1" class="modal-title pull-left"&gt;First modal&lt;/h4&gt;
              &lt;button type="button" class="close pull-right" aria-label="Close" (click)="parentModal.hide()"&gt;
                &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
              &lt;/button&gt;
            &lt;/div&gt;
            &lt;div class="modal-body"&gt;
              &lt;form&gt;
                 &lt;div class="form-control"&gt;
                    &lt;input type="text" placeholder="email" /&gt;
                 &lt;/div&gt;
                 &lt;div class="form-control"&gt;
                    &lt;input type="text" placeholder="password" /&gt;
                 &lt;/div&gt;
                 &lt;button type="submit" class="btn-primary"&gt;&lt;/button&gt;
              &lt;/form&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
     &lt;!-- confirmation modal --&gt; 
  
      &lt;div class="modal fade" bsModal #childModal="bs-modal" tabindex="-1" role="dialog" aria-labelledby="dialog-nested-name2"&gt;
        &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content"&gt;
            &lt;div class="modal-header"&gt;
              &lt;h4 id="dialog-nested-name2" class="modal-title pull-left"&gt;Second modal&lt;/h4&gt;
              &lt;button type="button" class="close pull-right" aria-label="Close" (click)="childModal.hide()"&gt;
                &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
              &lt;/button&gt;
            &lt;/div&gt;
            &lt;div class="modal-body"&gt;
              Are you want to exit? Your changes will not be saved.&lt;br&gt;
              &lt;button class="btn-danger"&gt;Discard&lt;/button&gt;
              &lt;button class="btn-primary"&gt;continue&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>