How to Make Angular Material Dialog Draggable with cdkDrag
Angular Material Draggable Dialog

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 make 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!

Import DragDropModule

If you want to follow along, create a new project with Material components or download the final code below.

Import the drag and drop module 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.

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 {
}

Make Dialog Draggable

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 -->
Draggable Material Dialog

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>

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

.mat-dialog-title .mat-icon {
    top: 5px;
    position: relative;
    cursor: grab;
}

Here is the result:

Drag Handle

Summary

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

Umut Esen

Umut is a certified Microsoft Certified Solutions Developer and has an MSc in Computer Science. He is currently working as a senior software developer for Royal London. He is the primary author and the founder of onthecode.

This Post Has 2 Comments

  1. Sagol arkadas, yardimci oldun!

  2. Thank you for this post! It helped me a lot. I’d like to add that to make the whole dialog (not only its title) draggable, we can write code like this:

    <mat-dialog-content cdkDrag cdkDragRootElement=”.cdk-overlay-pane”>

    </mat-dialog-content>

Leave a Reply

Close Menu

Subscribe

Join my developer newsletter to be the first to know about my new articles!