title: ngx-bootstrap modal (ng6/bs4) with used with angular2-draggable, doesn't drag the entire modal just what's inside
body: <p>So, I have an app that's done in ng6 and bs4.x</p>
  
  <p>I've installed angular2/draggable from here: <a href="https://www.npmjs.com/package/angular2-draggable" rel="nofollow noreferrer">Angular Draggable</a></p>
  
  <p>And I've used the example for modal here: <a href="https://valor-software.com/ngx-bootstrap/#/modals" rel="nofollow noreferrer">ngx-bootstrap/modal</a></p>
  
  <p>If you scroll down to: Component#, you'll see the example which I've put below.</p>
  
  <p>THE TEMPLATE:</p>
  
  <pre><code>&lt;button type="button" class="btn btn-primary" (click)="openModalWithComponent()"&gt;Create modal with component&lt;/button&gt;
  </code></pre>
  
  <p>THE COMPONENT:</p>
  
  <p>import { Component, OnInit } from '@angular/core';
      import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';</p>
  
  <pre><code>@Component({
    selector: 'demo-modal-service-component',
    templateUrl: './service-component.html'
  })
  export class DemoModalServiceFromComponent {
    bsModalRef: BsModalRef;
    constructor(private modalService: BsModalService) {}
  
    openModalWithComponent() {
      const initialState = {
        list: [
          'Open a modal with component',
          'Pass your data',
          'Do something else',
          '...'
        ],
        title: 'Modal with component'
      };
      this.bsModalRef = this.modalService.show(ModalContentComponent, {initialState});
      this.bsModalRef.content.closeBtnName = 'Close';
    }
  }
  
  /* This is a component which we pass in modal*/
  
  @Component({
    selector: 'modal-content',
    template: `
      &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" aria-label="Close" (click)="bsModalRef.hide()"&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;ul *ngIf="list.length"&gt;
          &lt;li *ngFor="let item of list"&gt;{{item}}&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
        &lt;button type="button" class="btn btn-default" (click)="bsModalRef.hide()"&gt;{{closeBtnName}}&lt;/button&gt;
      &lt;/div&gt;
    `
  })
  
  export class ModalContentComponent implements OnInit {
    title: string;
    closeBtnName: string;
    list: any[] = [];
  
    constructor(public bsModalRef: BsModalRef) {}
  
    ngOnInit() {
      this.list.push('PROFIT!!!');
    }
  }
  </code></pre>
  
  <p>The DRAGGABLE feature DOES WORK but in my example, this is what happens:</p>
  
  <p>Finally, here's my @component({...})</p>
  
  <p>Which I used to replace the basic modal in the code for ngx-bootstrap as shown above...</p>
  
  <p><a href="https://i.stack.imgur.com/g1urF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/g1urF.png" alt="The Modal as it appears when opened"></a></p>
  
  <p><a href="https://i.stack.imgur.com/odYou.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/odYou.png" alt="The Modal when I try to DRAG the container but the modal-content moves OUTSIDE of the container"></a></p>
  
  <p><a href="https://i.stack.imgur.com/afhY6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/afhY6.png" alt="Here&#39;s the way the modal looks inside the Elements Tab of Google"></a></p>
  
  <p>Please advise...</p>