You are currently viewing 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 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!

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)
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>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:

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

I am a software developer and blogger with a passion for the world wide web.

Leave a Reply

This Post Has 2 Comments

  1. Nam Vu Hoang

    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>

  2. random guy

    Sagol arkadas, yardimci oldun!