Resizable and draggable dialog based on CDK dialog.
| Angular | @acrodata/rnd-dialog |
|---|---|
| >=17 | 0.x |
npm install @acrodata/rnd-dialog --saveIf you use the Material as default lib, you don't need to import any styles.
@import '@angular/cdk/overlay-prebuilt.css';
// or
@use '@angular/cdk' as cdk;
@include cdk.overlay();import { Component } from '@angular/core';
import { DIALOG_DATA, DialogRef } from '@angular/cdk/dialog';
import { RndDialog, RndDialogDragHandle } from '@acrodata/rnd-dialog';
@Component({
selector: 'your-app',
template: `
<button (click)="openDialog()">Open dialog</button>
`,
imports: [],
})
export class YourAppComponent {
private rndDialog = inject(RndDialog);
openDialog() {
this.rndDialog.open(ExampleDialog, {
data: 'Hello, World!',
width: '600px',
height: '400px',
});
}
}
@Component({
selector: 'example-dialog',
template: `
<div class="drag-handle" rndDialogDragHandle>
Drag handle
<button (click)="dialogRef.close()">close</button>
</div>
<p>{{ data }}</p>
`,
imports: [RndDialogDragHandle],
})
export class ExampleDialog {
dialogRef = inject<DialogRef<string>>(DialogRef);
data = inject(DIALOG_DATA);
}The rnd-dialog simply provides a customized container for CDK dialog, so all APIs are the same with CDK dialog.
MIT