How to Make Angular Material Dialog Draggable with cdkDrag

With the Angular Material 7 release, an exciting feature we’ve been waiting for — drag and drop is available with the component dev kit.

In my previous article, I explained how to create a reusable confirm dialog with Angular Material. Today, we’ll learn how to make the dialog draggable. We will use the cdkDrag directive from the Component Dev Kit (CDK).

cdkDrag allows us to easily and declaratively create enable drag-and-drop functionality on components — no need to write custom directives!

[toc]

Import DragDropModule

Let’s import DragDropModule from the CDK into the module where you want to use drag and drop. Since I am keeping the project structure clean with a custom feature module for Material components, I use the CustomMaterialModule for this. You can learn more about my project structure.

import { NgModule } from '@angular/core';
import { MatButtonModule, MatDialogModule } from '@angular/material';
import { DragDropModule } from '@angular/cdk/drag-drop';

@NgModule({
  imports: [
    MatButtonModule, MatDialogModule, DragDropModule
  ],
  exports: [
    MatButtonModule, MatDialogModule, DragDropModule
  ]
})
export class CustomMaterialModule {
}Code language: TypeScript (typescript)

Use cdkDrag

With the DragDropModule in the project, we’re ready to get things moving.

Modify html template of the dialog to add cdkDrag and cdkDragRootElement  directives.

<!-- confirm-dialog.component.html -->

<h1 mat-dialog-title cdkDrag cdkDragRootElement=".cdk-overlay-pane">
  {{title}}
</h1>

<!-- rest of the dialog -->Code language: HTML, XML (xml)

That’s it! You can now move the dialog around using the title.

In most cases, cdkDrag is simply enough to make any div draggable. However, the dialog is injected into the DOM so we need to specifically tell Angular the root element to enable drag. For this reason, we pass cdk-overlay-pane class for cdkDragRootElement attribute because it is the root container of the dialog.

Add a drag handle

Although the dialog is draggable, it is also not obvious that the dialog can be dragged.

Let’s add an icon on the left hand-side of the title to draw the user’s attention.

1. Import the MatIconModule so that we can use material icon library.
2. Import Material font icons in index.html file.
3. Add a mat-icon element in the dialog title.

This is what the title looks like with a drag handle:

<h1 mat-dialog-title cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
  <mat-icon>drag_handle</mat-icon>
  {{title}}
</h1>Code language: HTML, XML (xml)

Add some styling so that the icon looks nice next to the title:

.mat-dialog-title .mat-icon {
    top: 5px;
    position: relative;
    cursor: grab;
}Code language: CSS (css)

Here is the result:

Summary

In this article, we have seen how easy it is to make the Angular Material Dialog draggable with cdkDrag directive.