ng2-bootstrap-modal closes immediately

Question

The dialog shows for about a second and then hides. Perhaps I could use this option "autoCloseTimeout" to set the timeout to a minute or two as a workaround, but I'm hoping there is a cleaner solution to this problem. I saw one comment that this occurred because the popup is losing focus. I ruled this out by placing a textbox on the popup and clicking on it immediately.

Here's the html

<span>
  <a href="#" title="Delete" class="myItem" 
     (click)="showConfirm(item.id)">
     <span class='glyphicon glyphicon-trash toolbarItem'></span> 
  </a>
</span>

Here's the method in the Typescript component

showConfirm(blkId: string) {
    let disposable = this.dialogService.addDialog(ConfirmComponent, {
        title: 'Confirm title',
        message: 'Confirm message'
    })
        .subscribe((isConfirmed) => {
            //We get dialog result
            if (isConfirmed) {
                alert('accepted');
            }
            else {
                alert('declined');
            }
        });
    //We can close dialog calling disposable.unsubscribe();
    //If dialog was not closed manually close it by timeout
    setTimeout(() => {
        disposable.unsubscribe();
    }, 4000);  //changign this value has no affect
}

Here's the ConfirmDialog component source:

import { Component } from '@angular/core';
import { DialogComponent, DialogService } from "ng2-bootstrap-modal";
export interface ConfirmModel {
    title: string;
    message: string;
}
@Component({
    selector: 'confirm',
    template: `<div class="modal-dialog">
                <div class="modal-content">
                   <div class="modal-header">
                     <button type="button" class="close" (click)="close()" >&times;</button>
                     <h4 class="modal-title">{{title || 'Confirm'}}</h4>
                   </div>
                   <div class="modal-body">
                     <p>{{message || 'Are you sure?'}}</p>
                   </div>
                   <div class="modal-footer">
                     <button type="button" class="btn btn-primary" (click)="confirm()">OK</button>
                     <button type="button" class="btn btn-default" (click)="close()" >Cancel</button>
                   </div>
                 </div>
              </div>`
})
export class ConfirmComponent extends DialogComponent<ConfirmModel, boolean> implements ConfirmModel {
    title: string;
    message: string;
    constructor(dialogService: DialogService) {
        super(dialogService);
    }
    confirm() {
        // we set dialog result as true on click on confirm button, 
        // then we can get dialog result from caller code 
        this.result = true;
        this.close();
    }
}

I'm using the following versions: angular 2.4.5, angular2-platform-node, ~2.0.11 bootstrap: ^3.3.7

Answer 1

The reason for this is router gets activated before the modal component launches. You should either use ng-bootstrap for this or having the component as a child of your component parent component