title: ngx-bootstrap modal backdrop undefined
body: <p>I use ngx-bootstrap.</p>
  
  <p><strong>editpatient.component.ts</strong> (Not all code)</p>
  
  <pre><code>import { Component, EventEmitter, Input, Output, ViewChild, AfterViewInit, OnInit } from '@angular/core';
  import { NgForm, FormGroup, FormControl, ReactiveFormsModule, FormBuilder } from '@angular/forms';
  import { ModalDirective } from 'ngx-bootstrap/modal';
  import { PatientCard } from "../../../models/patientcard.model";
  
  @Component({
      selector: 'editpatient',
      templateUrl: './editpatient.component.html',
  })
  
  export class EditPatientComponent {
      @Input('card') card: PatientCard;
      @Output() onEditingPatient = new EventEmitter&lt;PatientCard&gt;();
  
      @ViewChild('editCardModal') editCardModal: ModalDirective;
      editCardForm: FormGroup;
  
      constructor(private fb: FormBuilder) { }
  
      showEditPatientModal() {
          this.editCardModal.show();
      }
  </code></pre>
  
  <p><strong>editpatient.component.html</strong></p>
  
  <pre><code>&lt;div bsModal #editCardModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="dialog-child-name"&gt;
      &lt;div class="modal-dialog modal-lg"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;h5 id="dialog-child-name" class="modal-title" id="editCardModal"&gt;Редактирование карты&lt;/h5&gt;
                  &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;/button&gt;
              &lt;/div&gt;
              &lt;form [formGroup]="editCardForm" (ngSubmit)="editCard(editCardForm)"&gt;
                  &lt;div class="modal-body"&gt;
                      &lt;div class="form-group"&gt;
                          &lt;label for="card"&gt;Карта&lt;/label&gt;
                          &lt;input type="text" class="form-control" formControlName="card" id="card" required&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-footer"&gt;
                      &lt;button type="button" class="btn btn-warning" data-dismiss="modal" (click)="closeEditCardModal()"&gt;Закрыть&lt;/button&gt;
                      &lt;button type="submit" class="btn btn-success" [disabled]="!editForm.valid"&gt;Редактировать&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>patient.component.ts</strong> (Not all code)</p>
  
  <pre><code>import { Component, OnInit, ViewChild, ChangeDetectorRef, ApplicationRef, EventEmitter, Output, Input, TemplateRef } from '@angular/core';
  import { PatientVisit } from '../../models/patientvisit.model';
  import { PatientCard } from '../../models/patientcard.model';
  import { CardsService } from '../../services/cards.service';
  import { CategoriesService } from '../../services/categories.service';
  import { Router, ActivatedRoute } from '@angular/router';
  import { GenericCategory } from '../../models/genericcategory.model';
  import { DoctorCategory } from '../../models/doctorcategory.model';
  import { NgForm, FormGroup, FormControl, ReactiveFormsModule, FormBuilder } from '@angular/forms';
  import { DiagnosisCategory } from '../../models/diagnosiscategory.model';
  import { BsModalService } from 'ngx-bootstrap/modal';
  import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
  import { ModalDirective } from 'ngx-bootstrap';
  import { MonthPicker } from '../../misc/monthpicker';
  import { CHECKBOX_REQUIRED_VALIDATOR } from '@angular/forms/src/directives/validators';
  import { AddVisitComponent } from "./addvisit/addvisit.component";
  import { EditVisitComponent } from "./editvisit/editvisit.component";
  import { EditPatientComponent } from "./editpatient/editpatient.component";
  
  @Component({
      selector: 'patient',
      templateUrl: './patient.component.html'
  })
  
  export class PatientComponent implements OnInit {
      @ViewChild('deleteModal') deleteModal: ModalDirective;
  
      // Дочерние компоненты для модальных окон.
      @ViewChild(AddVisitComponent) addVisitComponent: AddVisitComponent;
      @ViewChild(EditVisitComponent) editVisitComponent: EditVisitComponent;
      @ViewChild(EditPatientComponent) editPatientComponent: EditPatientComponent;
  
      startEditCard() {
          try {
              this.editPatientComponent.card = this.card;
              this.editPatientComponent.showEditPatientModal();
          }
          catch (e) {
              alert(e);
          }
      }
  </code></pre>
  
  <p><strong>patient.component.html</strong> (Not all code)</p>
  
  <pre><code>&lt;addvisit #addVisitComponent
            (onAdding)="addVisit($event)"&gt;
  &lt;/addvisit&gt;
  
  &lt;editvisit #editVisitComponent
             (onEditingVisit)="editVisit($event)"
             (onDeleting)="deleteVisit($event)"&gt;
  &lt;/editvisit&gt;
  
  &lt;editpatient #editPatientComponent
               (onEditingPatient)="editCard($event)"&gt;
  &lt;/editpatient&gt;
  </code></pre>
  
  <p>If i call startEditCard() i have error:</p>
  
  <blockquote>
    <p>Cannot read property 'backdrop' of undefined</p>
  </blockquote>
  
  <p>I have similar error for editPatientComponent, but addVisitComponent works fine. (Components are similar to each other)</p>