title: Bootstrap dialog not closing on calling modal('hide')
body: <p>In the code <a href="https://stackblitz.com/edit/angular-a9wcee" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-a9wcee</a></p>
  
  <p>I am showing a <code>Bootstrap</code> dialog when the application starts. But the dialog box doesn't close on clicking the close button. What am I doing wrong?</p>
  
  <p>In <code>index.html</code>, I create the application's root component and pass an attribute which shows in the dialog box</p>
  
  <pre><code>&lt;my-app signup="startup message"&gt;loading &lt;/my-app&gt;
  </code></pre>
  
  <p>In <code>app.component.ts</code>, in <code>ngAfterViewInit</code>, I read the attribute and show the dialog box (after calling <code>setTimeout</code> as I need to wait for change detection to finish before)</p>
  
  <pre><code>ngAfterViewChecked(){
  
      this.signup = this.el.nativeElement.getAttribute('signup');
  
      setTimeout(()=&gt;this.isSignupProcess());
    }
  </code></pre>
  
  <p><code>app.component.html</code> has a dialog box component </p>
  
  <pre><code>  Hope to see dialog when the application starts!  
  
        &lt;button&gt;Am I clickable&lt;/button&gt;
        &lt;app-dialog-box #dialogBox [dialogMessage]="" [dialogID]="'appDialog'" [context]=""&gt;&lt;/app-dialog-box&gt;
  </code></pre>
  
  <p>The dialog box component is a <code>Bootstrap</code> modal.</p>
  
  <pre><code>&lt;div class="modal" #modal tabindex="-1" role="dialog" id="someID"&gt;
    &lt;div class="modal-dialog modal-dialog-centered" role="document"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;h5 class="modal-title"&gt;Example&lt;/h5&gt;
          &lt;button type="button" class="close" data-dismiss="modal" 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;p&gt;{{dialogMessage}}&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;button type="button" class="btn btn-secondary" data-dismiss="modal" (click)="dialogHide()"&gt;Close&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>the dialog component also has functions to show and hide the modal. </p>
  
  <pre><code>dialogShow(message:string,context:DialogContext){
  
     this.context = context;
      this.dialogMessage = message;
      //console.log("dialog show called ");
      $(this.dialogRef.nativeElement).modal('show');
  
    }
  
    dialogHide(){
     // console.log("dialog hide called");
      $(this.dialogRef.nativeElement).modal('hide');
    }
  }
  </code></pre>
  
  <p>But <code>dialogHide</code> doesn't hide the modal. Why?</p>