title: Correct way to open a modal from a navbar in Angular2?
body: <p>I'm working on a personal site in Angular2 using ng2-bootstrap for some of the elements. </p>
  
  <p>I have a fixed navbar, in which I would like to have a button or text link that launches a modal for an e-mail contact form. The problem I'm having is that when I open the modal, it's greyed out; my understanding is that it's because it's anchored to the navbar. One way to address that, as I understand it, would be to use JQuery to append the modal to the body tag, but I've read that directly manipulating the DOM is bad practice in Angular2 (and it's not entirely clear to me what the correct way to do that in TypeScript would be, anyway), so I'm at a bit of a loss as to how to proceed.</p>
  
  <p>I'm a long time coder but haven't done anything terribly advanced in the world of web development, so I apologize if this is a trivial question.</p>
  
  <p>The TypeScript I have looks like this:</p>
  
  <pre><code>import {Component} from '@angular/core';
  import {CORE_DIRECTIVES} from '@angular/common';
  import {MODAL_DIRECTVES, BS_VIEW_PROVIDERS} from 'ng2-bootstrap/ng2-bootstrap';
  
  
  @Component({
      selector: 'contact-modal',
      directives: [MODAL_DIRECTVES, CORE_DIRECTIVES],
      viewProviders:[BS_VIEW_PROVIDERS],
      template: `    
  
  &lt;button class="btn btn-primary button-text" (click)="lgModal.show()"&gt;Large modal&lt;/button&gt;
  
  
  &lt;div bsModal #lgModal="bs-modal" class="modal fade modal-backdrop" data-backdrop="false" 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;button type="button" class="close" (click)="lgModal.hide()" aria-label="Close"&gt;
            &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
          &lt;/button&gt;
          &lt;h4 class="modal-title"&gt;this is going to be an email contact form&lt;/h4&gt;
          &lt;p&gt; email form goes here&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
          ...
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;    
      `
  })
  
  export class ContactModalComponent{
  //something goes here?    
  }
  </code></pre>
  
  <p>I'm including it in the navbar by simply placing a reference to contact-modal in the navbar where I want the link.
  Thanks very much for any help.</p>