title: Bootstrap modals in Angular2
body: <p>I'm using Angular2 and bootstrap for my web application.</p>
  
  <p>I use a lot of bootstrap dialogs and I noticed that the only way to make them works great is to put them as last children of the <strong>body</strong> tag.</p>
  
  <p>But how can I do this using angular2 and without third party libs (all the libs I found have no support)?</p>
  
  <p>I created this wrapper:</p>
  
  <pre><code>export abstract class BaseDialogComponent&lt;TArgument, TResult&gt; implements OnDestroy
  {
      @Input() id:number;
      @Input() openDialogEvent:EventEmitter&lt;TArgument&gt;;
      @Output() closeEvent:EventEmitter&lt;TResult&gt; = new EventEmitter&lt;TResult&gt; ();
  
      public argument:TArgument = &lt;any&gt;{};
      private openDialogEventSubscription:EventSubscription;
  
      public constructor ()
      {
          setTimeout (() =&gt; {
              this.openDialogEventSubscription = this.openDialogEvent.subscribe (arg =&gt; {
                  this.argument = arg;
                  this.onDialogReady ();
  
                  jQuery('#' + this.id).modal();
              });
          });
      }
  
      public ngOnDestroy ()
      {
          if (this.openDialogEventSubscription)
              this.openDialogEventSubscription.unsubscribe ();
      }
  
      protected abstract onDialogReady ():void;
  
      protected onCloseClick ()
      {
          this.closeDialog (undefined);
      }
  
      protected closeDialog (result:TResult)
      {           
          jQuery('#' + this.id).modal ("hide");
  
          if (result !== undefined)
              this.closeEvent.emit (result);
      }
  }
  </code></pre>
  
  <p>And you can use it like this:</p>
  
  <pre><code>@Component({
      moduleId : module.id,
      selector: 'my-selector',
      templateUrl: 'my-template.component.html',
  })
  export class CompanyDetailsDialogComponent extends BaseDialogComponent&lt;string, void&gt; 
  {     
      protected onDialogReady ():void 
      {
          alert ('hello ' + this.argument);
      }
  }
  </code></pre>
  
  <p>It is quite confortable to use and works great, but in this way the html code is located inside the component that uses the dialog, and not directly in the <strong>body</strong> tag.</p>
  
  <p>Can you suggest me how to use bootstrap dialog properly in agular2?</p>