title: Trying to close one modal and open another but both keep closing
body: <p>I am using angular 4, bootstrap 4 (beta), and ngx-bootstrap. I am trying to create a modal service that will serve as an alert dialog on any page. The problem is that I am trying to close the <code>test</code> modal and open the <code>alert</code> modal but the <code>alertModal</code> doesnt open I'm guessing because <code>this.bsModalRef.hide</code> is hiding both of them.</p>
  
  <p>What am I doing wrong?</p>
  
  <p>test.html</p>
  
  <pre><code>&lt;div bsModal #newBidModal="bs-modal"  tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"&gt;
      &lt;div class="modal-dialog w-100"&gt;
          &lt;div class="modal-content w-100"&gt;
              &lt;form class="form-group" [formGroup]="testForm" (ngSubmit)="onSubmit(testForm.value)"&gt;
              &lt;/form
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;app-modal  #childModal [title]="'Modal'"&gt;
    &lt;div class="modal-body"&gt;
      {{message}}
    &lt;/div&gt;
  &lt;/app-modal&gt;
  </code></pre>
  
  <p>test.component.ts</p>
  
  <pre><code>export class TestComponent implements OnInit {
    TestComponent: any;
  
    @ViewChild('childModal') childModal: ModalComponent;
    message: string;
  
    constructor(public bsModalRef: BsModalRef){}
  
    onSubmit(input:any) {
      this.API.post(input).subscribe(data =&gt; {
        this.bsModalRef.hide();
        this.alert();
      });
    }
  }
  
  alert() {
      this.childModal.title = 'hi';
      this.message = 'test';
      this.childModal.show();
  }
  </code></pre>
  
  <p>alert-modal.html</p>
  
  <pre><code>&lt;div bsModal #childModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"&gt;
    &lt;div class="modal-dialog modal-lg"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;h4 class="modal-title pull-left"&gt;{{title}}&lt;/h4&gt;
          &lt;button type="button" class="close pull-right" (click)="childModal.hide()" aria-label="Close"&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;ng-content select=".modal-body"&gt; &lt;/ng-content&gt;
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;div class="pull-left"&gt;
            &lt;button class="btn btn-default" (click)="childModal.hide()"&gt; Cancel &lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>alert-modal.ts</p>
  
  <pre><code>export class AlertModalComponent implements OnInit {
  
    @ViewChild('childModal') public childModal: ModalDirective;
  
    @Input() title: string;
    constructor() {
    }
    show() {
      this.childModal.show();
    }
    hide() {
      this.childModal.hide();
    }
  }
  </code></pre>