Компонент basic-dialog не работает нормально с асинхронным вызовом

Question

Я создал компонент основного диалога для отображения всплывающего окна на экране для подтверждения.Этот компонент не работает с асинхронным вызовом.Я хочу отобразить всплывающее окно после получения ответа службы.Я использую Angular 6 и Bootstarap 3.3

Ниже приведен мой базовый компонент ts файл: -

@Component({
  selector: 'basic-dialog',
  styleUrls: ['./dialog.component.scss'],
  templateUrl: './dialog.component.html',
  animations: [
    trigger('dialogState', [
      transition(':enter', [
        style({ transform: 'translateY(-100%)' }),
        animate('900ms ease-in', style({ transform: 'translateY(0%)' }))
      ]),
      transition(':leave', [animate('100ms ease-in', style({ transform: 'translateY(-100%)' }))])
    ])
  ]
})
export class DialogComponent implements OnChanges, OnDestroy {
  @Input() visible = false;
  @Input() modalId = '';
  @Input() styles: any;

  constructor(
    @Inject(DOCUMENT) private document: Document,
    private renderer: Renderer2,
    private element: ElementRef,
    private changeDetectorRef: ChangeDetectorRef
  ) {}
  ngOnChanges(): void {
    if (this.visible) {
      this.element.nativeElement.querySelector('.modal').id = this.modalId;
      document.querySelector('body').appendChild(this.element.nativeElement);
      this.changeDetectorRef.detectChanges();
    }
  }
  ngOnDestroy(): void {
    if (this.element.nativeElement.parentElement.tagName.toUpperCase() === 'body'.toUpperCase()) {
      document.querySelector('body').removeChild(this.element.nativeElement);
      if (document.querySelector('.modal-backdrop')) {
        document.querySelector('body').removeChild(document.querySelector('.modal-backdrop'));
      }
    }
  }
}

HTML-файл: -

<div class="modal fade" [id]="modalId" role="dialog" aria-label="close" style="display: none;">
  <div class="modal-dialog" [ngStyle]="styles">
    <div class="uil-dialog-card x-overflow-hidden">
      <!-- <button  *ngIf="closable" (click)="close()" aria-label="Close" type="button" class="close" data-dismiss="modal">
              <img class="svg" src="../assets/theme/img/cross_icon.svg">
          </button>-->
      <div id="modal_content">
        <ng-content></ng-content>
      </div>
    </div>
  </div>
</div>

файл панели инструментов ts файл:-

ngOnInit(): void {
    this.visible = false;
    this.loginService.dashboardModuleChangeMsg.subscribe(data => {
      this.displayModuleChangePopup(data);
    });
}

  /** To display Dialog box */
  displayModuleChangePopup(data): void {
      this.visible = true;
      this.changeDetectorRef.detectChanges();
  }
      /** Event handler for continue button in Dialog box */
  onSubmitHandler(): void {
   // code
  }
  /** Event handler for cancel button in Dialog box */
  onCancelHandler(): void {
  // code
  }

html-файл панели инструментов: -

<basic-dialog *ngIf="visible" [visible]="visible" [modalId]="MODULE_SWITCH_DIALOG" [styles]="{'max-width':'434px'}">
            <div class="row">
                <div class="uil-card-title-area" style="margin-bottom:20px">
                    <div class="uil-card-title">
                        Module Navigation
                    </div>
                </div>
                <div id="text_inputs_body">
                    You are trying to navigate to another module. Any unsaved data will be lost.
                </div>
                <div class="alignRight">
                    <button type="button" data-dismiss="modal" class="uil-btn-flat uil-flip-button" (click)="onCancelHandler(user)">Cancel</button>
                    <button type="button" data-dismiss="modal" class="uil-btn uil-tooltip" (click)="onSubmitHandler(user);">Continue</button>
                </div>
            </div>
        </basic-dialog>

Всплывающее окно не отображается в первый раз, но при отображении всплывающего окна, вызываемого абонентом во второй раз.Если я запускаю это всплывающее окно без асинхронного вызова, оно работает нормально.