RnD Dialog

Resizable and draggable dialog based on CDK dialog.

Quick links

Documentation | Playground

Installation

npm install @acrodata/rnd-dialog --save

Usage

If 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>
  `,
  standalone: true,
  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>
  `,
  standalone: true,
  imports: [RndDialogDragHandle],
})
export class ExampleDialog {
  dialogRef = inject<DialogRef<string>>(DialogRef);
  data = inject(DIALOG_DATA);
}

API

The rnd-dialog simply provides a customized container for CDK dialog, so all APIs are the same with CDK dialog.

License

MIT