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, get the starter project from GitHub or create a new project with Material components.

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.

You can download the final project source code from GitHub.

Umut Esen

Umut is an enthusiastic software developer, latest web and mobile technology adapter and primary author of onthecode.

This Post Has One Comment

  1. Sagol arkadas, yardimci oldun!

Leave a Reply

Close Menu