How to make MdDialog movable in Angular 2 Material Design
I am creating a small web application using Angular2 and its material construct ( https://material.angular.io ) in which I am using MdDialog to show a dialog using the following code:
import {Component} from '@angular/core';
import {MdDialog, MdDialogRef} from '@angular/material';
@Component({
selector: 'dialog-result',
templateUrl: './dialog-result.html',
})
export class DialogResult {
selectedOption: string;
constructor(public dialog: MdDialog) {}
openDialog() {
let dialogRef = this.dialog.open(Dialog);
dialogRef.afterClosed().subscribe(result => {
this.selectedOption = result;
});
}
}
@Component({
selector: 'dialog',
templateUrl: './dialog.html',
})
export class Dialog {
constructor(public dialogRef: MdDialogRef<Dialog>) {}
}
I want to make the dialog either draggable or moveable with the mouse so that I can also see the content of my page.
+3
source to share
1 answer
I am using Draggabilly library.
when you open a dialog component, pass the "panelClass" suit in parameters:
let dialogRef = this.dialog.open(Dialog, {
panelClass: 'dialog-container'
});
Then the initial draggablilly in the ngOnInit hook dialog component:
const holder = new draggablilly('.dialog-container');
0
source to share