title: ng-bootstrap modal not closing on cross click
body: <p>i'm using the ng-bootstrap modal popup, and it's not closing on click of the cross button. </p>
  
  <p>This is the <code>&lt;a&gt;</code> tag that triggers the popup - </p>
  
  <pre><code>&lt;div class="actions padding-zero"&gt;
      &lt;a href="javascript:void(0);" (click)="openFilter()" class="icon configure-columns-icon"&gt;
          &lt;span class="control-label"&gt;Configure Columns&lt;/span&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Modal - </p>
  
  <pre><code>&lt;ng-template #filterForm let-modal&gt;
      &lt;div class="TitlePanel"&gt;
      Configure Columns                       
      &lt;button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')"&gt;
      X
      &lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
        Body
      &lt;/div&gt;                   
  &lt;/ng-template&gt;
  </code></pre>
  
  <p>component.ts file - </p>
  
  <pre><code>export class NgbdModalContent {
      @Input() name;
      constructor(public activeModal: NgbActiveModal) { }
  }
  
  
  @Component({
      selector: 'app-modals',
      templateUrl: './modals.component.html',
      styleUrls: ['./modals.component.scss'],
      encapsulation: ViewEncapsulation.None,
  })
  
  export class ModalsComponent {
  
      closeResult: string;
  
      constructor(private modalService: NgbModal) { }
  
      // Open default modal
      open(content) {
          this.modalService.open(content).result.then((result) =&gt; {
              this.closeResult = `Closed with: ${result}`;
          }, (reason) =&gt; {
              this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
          });
      }
  
      // This function is used in open
      private getDismissReason(reason: any): string {
          if (reason === ModalDismissReasons.ESC) {
              return 'by pressing ESC';
          } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
              return 'by clicking on a backdrop';
          } else {
              return `with: ${reason}`;
          }
      }
  
      // Open modal with dark section
      openModal(customContent) {
          this.modalService.open(customContent, { windowClass: 'dark-modal' });
      }
  
      // Open content with dark section
      openContent() {
          const modalRef = this.modalService.open(NgbdModalContent);
          modalRef.componentInstance.name = 'World';
      }
  }
  </code></pre>
  
  <p>Also, I'm getting this error in the console when i click the close button - "Cannot read property 'dismiss' of undefined"</p>
  
  <p><a href="https://i.stack.imgur.com/BpYpa.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BpYpa.jpg" alt="enter image description here"></a></p>