How to achieve draggable dialog using angular material 2

To achieve a draggable dialog using Angular Material 2, you can create a custom dialog component that allows the user to drag the dialog around the screen. We'll use Angular CDK's DragDropModule to enable the draggable behavior. Here's a step-by-step guide:

1. Install Angular Material and Angular CDK: Make sure you have Angular Material and Angular CDK installed in your project.

bashCopy code
npm install @angular/material @angular/cdk --save

2. Import Required Modules: In your app module (or the module where you want to use the draggable dialog), import the necessary modules:

typescriptCopy code
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { MatDialogModule } from '@angular/material/dialog';

import { AppComponent } from './app.component';

@NgModule({
  imports: [BrowserModule, BrowserAnimationsModule, DragDropModule, MatDialogModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. Create a Draggable Dialog Component: Create a new Angular component for the draggable dialog. We'll use the Angular Material MatDialog to open the dialog.

typescriptCopy code
import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';

@Component({
  selector: 'app-draggable-dialog',
  template: `
    <h2 mat-dialog-title class="draggable-handle">Draggable Dialog</h2>
    <mat-dialog-content>
      <!-- Dialog content goes here -->
      <p>Dialog content goes here...</p>
    </mat-dialog-content>
  `,
  styles: [`
    .draggable-handle {
      cursor: move;
    }
  `]
})
export class DraggableDialogComponent {}

4. Implement Draggable Behavior: To make the dialog draggable, we'll use Angular CDK's cdkDrag directive. Add this directive to the dialog component's root element.

typescriptCopy code
import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';

@Component({
  selector: 'app-draggable-dialog',
  template: `
    <h2 mat-dialog-title cdkDrag class="draggable-handle">Draggable Dialog</h2>
    <mat-dialog-content cdkDrag>
      <!-- Dialog content goes here -->
      <p>Dialog content goes here...</p>
    </mat-dialog-content>
  `,
  styles: [`
    .draggable-handle {
      cursor: move;
    }
  `]
})
export class DraggableDialogComponent {}

5. Open the Draggable Dialog: In your component where you want to open the draggable dialog, use MatDialog to open the dialog component you created earlier.

typescriptCopy code
import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { DraggableDialogComponent } from './draggable-dialog.component';

@Component({
  selector: 'app-dialog-trigger',
  template: `
    <button mat-button (click)="openDialog()">Open Draggable Dialog</button>
  `
})
export class DialogTriggerComponent {
  constructor(private dialog: MatDialog) {}

  openDialog() {
    this.dialog.open(DraggableDialogComponent, {
      width: '400px', // Set the width as needed
      height: 'auto', // Set the height as needed or 'auto' to adjust based on content
      disableClose: true // Optionally disable closing the dialog by clicking outside
    });
  }
}

6. Style the Draggable Dialog (Optional): You can apply custom styles to the draggable dialog component to adjust the appearance based on your application's design.

That's it! Now you have a draggable dialog using Angular Material 2 and Angular CDK. The user can click and drag the dialog around the screen by holding the draggable handle (specified by the cdkDrag directive). Remember to adjust the width, height, and other properties as needed to fit your use case.