How to achieve draggable dialog using angular material 2

Question

I am using angular material2 for creating UI.I wanted to have a draggable dialog in one of the component. Is there is any chance of achieving by using mat-dialog.If not can someone please guide me how to create a draggable dialog like shown in the below link by using angular5

https://codepen.io/Crevil/pen/eBXBEE

HTML Code

<div ng-app="app" ng-controller="Controller as ctrl">
  <script type="text/ng-template" id="modal.html">
    <div draggable=".modal-header">
      <div class="modal-header">
        <h3 class="modal-title">I'm a draggable modal!</h3>
      </div>
      <div class="modal-body">
        <p>This is my body</p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" type="button" ng-click="modal.ok()">OK</button>
        <button class="btn btn-warning" type="button" ng-click="modal.cancel()">Cancel</button>
      </div>
    </div>
  </script>
  <div class="well text-center">
    <button class="btn btn-default" ng-click="ctrl.openModal()">Open modal</button>
  </div>
</div>

Typescript code:

const app = angular.module('app', ['ui.bootstrap']);

/**
 * Controller

 */
class Controller {
  constructor(private $uibModal: ng.ui.bootstrap.IModalService) {
    this.openModal();
  }

  openModal(): void {
    this.$uibModal.open({
      backdrop: false,
      controller: ModalController,
      controllerAs: 'modal',
      templateUrl: 'modal.html'
    });
  }
}

app.controller('Controller', Controller);

/**
 * Modal controller
 */
class ModalController {
  constructor(private $uibModalInstance: ng.ui.bootstrap.IModalServiceInstance) { }

  ok(): void {
    this.$uibModalInstance.close();
  }

  cancel(): void {
    this.$uibModalInstance.dismiss();
  }
}

/**
 * Draggable directive
 */
interface IDraggableScope extends ng.IScope {
  draggable?: string;
}

interface IPosition {
  x: number;
  y: number;
}

class DraggableDirective {
  private cursorPosition: IPosition;
  private offsetPosition: IPosition;

  private mouseMoveEventListener: JQuery;
  private mouseUpEventListener: JQuery;

  private element: JQuery;
  private handle: JQuery;

  constructor(
    $element: ng.IAugmentedJQuery,
    $scope: IDraggableScope,
    private $document: ng.IDocumentService
  ) {
    this.setCursorPosition(0, 0);
    this.setOffsetPosition(0, 0);

    this.element = $element.parent('.modal-content');

    this.element.css({
      position: 'relative'
    });

    if ($scope.draggable) {
      this.handle = angular.element($scope.draggable);
    } else {
      this.handle = this.element;
    }

    this.handle.on('mousedown', (event: JQueryEventObject) => this.beginDrag(event));
    this.handle.css({
      cursor: 'move'
    });
  }

  private beginDrag(event: JQueryEventObject): void {
    event.preventDefault();

    const x: number = event.pageX - this.offsetPosition.x;
    const y: number = event.pageY - this.offsetPosition.y;
    this.setCursorPosition(x, y);

    this.mouseMoveEventListener = this.$document.on('mousemove', (e: JQueryEventObject) => this.drag(e));
    this.mouseUpEventListener = this.$document.on('mouseup', (e: JQueryEventObject) => this.endDrag());
  }

  private drag(event: JQueryEventObject): void {
    const x: number = event.pageX - this.cursorPosition.x;
    const y: number = event.pageY - this.cursorPosition.y;

    this.setOffsetPosition(x, y);

    this.element.css({
      left: `${x}px`,
      top: `${y}px`
    });
  }

  private endDrag(): void {
    this.mouseMoveEventListener.off();
    this.mouseUpEventListener.off();
  }

  private setCursorPosition(x: number, y: number): void {
    this.cursorPosition = {
      x: x,
      y: y
    };
  }

  private setOffsetPosition(x: number, y: number): void {
    this.offsetPosition = {
      x: x,
      y: y
    };
  }
}

app
  .directive('draggable', () => {
    return {
      controller: DraggableDirective,
      restrict: 'A',
      scope: {
        'draggable': '@'
      }
    };
  });