Skip to main content

​
Overview

The Dialog component displays content in an overlay window. It supports modal and non-modal modes, dragging, resizing, maximization, and includes built-in animations and accessibility features.

​
Import

import { MagaryDialog } from 'ng-magary';

​
Basic Usage

import { Component, signal } from '@angular/core';
import { MagaryDialog } from 'ng-magary';

@Component({
  selector: 'app-dialog-demo',
  standalone: true,
  imports: [MagaryDialog],
  template: `
    <button (click)="visible.set(true)">Show Dialog</button>
    
    <magary-dialog
      [(visible)]="visible"
      header="Dialog Title"
      [modal]="true"
      [draggable]="true">
      <p>Dialog content goes here.</p>
      <div class="dialog-footer">
        <button (click)="visible.set(false)">Cancel</button>
        <button (click)="save()">Save</button>
      </div>
    </magary-dialog>
  `
})
export class DialogDemoComponent {
  visible = signal(false);

  save() {
    // Save logic
    this.visible.set(false);
  }
}

​
Draggable Dialog

<magary-dialog
  [(visible)]="visible"
  header="Draggable Dialog"
  [draggable]="true"
  [modal]="true">
  <p>Click and drag the header to move this dialog.</p>
</magary-dialog>

​
Resizable Dialog

<magary-dialog
  [(visible)]="visible"
  header="Resizable Dialog"
  [resizable]="true"
  [modal]="true"
  width="500px"
  height="400px">
  <p>Drag the bottom-right corner to resize.</p>
</magary-dialog>

​
Maximizable Dialog

<magary-dialog
  [(visible)]="visible"
  header="Maximizable Dialog"
  [maximizable]="true"
  [modal]="true">
  <p>Click the maximize icon in the header to expand to full screen.</p>
</magary-dialog>

​
Non-Modal Dialog

<magary-dialog
  [(visible)]="visible"
  header="Non-Modal Dialog"
  [modal]="false"
  [draggable]="true">
  <p>This dialog doesn't block interaction with the page.</p>
</magary-dialog>

​
Properties

​
visible
boolean
default:"false"
Controls dialog visibility. This is a model property supporting two-way binding.
​
header
string | undefined
default:"undefined"
Header text to display at the top of the dialog.
​
draggable
boolean
default:"true"
Enables dragging the dialog by its header.
​
resizable
boolean
default:"false"
Enables resizing the dialog from the bottom-right corner.
​
modal
boolean
default:"true"
When true, displays a backdrop and blocks interaction with the page.
​
closeOnEscape
boolean
default:"true"
Closes the dialog when the Escape key is pressed.
​
dismissableMask
boolean
default:"false"
Closes the dialog when clicking the backdrop (only works in modal mode).
​
maximizable
boolean
default:"false"
Shows a maximize button in the header.
​
trapFocus
boolean
default:"true"
Traps keyboard focus within the dialog.
​
autoFocus
boolean
default:"true"
Automatically focuses the first focusable element when opened.
​
ariaLabel
string
default:"'Dialog'"
ARIA label for the dialog element.
​
style
Record<string, unknown> | null
default:"null"
Inline styles to apply to the dialog container.
​
contentStyle
Record<string, unknown> | null
default:"null"
Inline styles to apply to the content area.
​
styleClass
string | undefined
default:"undefined"
CSS class name(s) to apply to the dialog container.
​
appendTo
'body' | 'local'
default:"'body'"
Where to append the dialog in the DOM. ‘body’ is recommended for proper z-index stacking.

​
Aesthetic Properties

​
width
string | undefined
default:"undefined"
Dialog width (e.g., ‘600px’, ‘50vw’).
​
height
string | undefined
default:"undefined"
Dialog height (e.g., ‘400px’, ‘80vh’).
​
position
'center' | 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
default:"'center'"
Initial position of the dialog.
​
backgroundColor
string | undefined
default:"undefined"
Background color of the dialog.
​
headerBackground
string | undefined
default:"undefined"
Background color of the header.
​
contentBackground
string | undefined
default:"undefined"
Background color of the content area.
​
footerBackground
string | undefined
default:"undefined"
Background color of the footer.
​
showBorder
boolean
default:"true"
Whether to show the dialog border.
​
showSectionBorders
boolean
default:"true"
Whether to show borders between header, content, and footer sections.
​
glass
boolean
default:"false"
Applies a glass morphism effect to the dialog.

​
Events

​
onShow
EventEmitter<AnimationEvent>
Emitted when the dialog’s show animation starts.
​
onHide
EventEmitter<AnimationEvent>
Emitted when the dialog’s hide animation completes.

​
Methods

The component exposes these public methods: 
close(event?: Event)      // Programmatically close the dialog
maximize(event: Event)    // Toggle maximize state

​
Advanced Examples

​
Confirmation Dialog

@Component({
  template: `
    <button (click)="showConfirmation()">Delete Item</button>
    
    <magary-dialog
      [(visible)]="confirmVisible"
      header="Confirm Deletion"
      [modal]="true"
      [closeOnEscape]="true"
      width="400px">
      <p>Are you sure you want to delete this item? This action cannot be undone.</p>
      <div class="flex justify-end gap-2 mt-4">
        <button (click)="confirmVisible.set(false)" class="btn btn-secondary">
          Cancel
        </button>
        <button (click)="confirmDelete()" class="btn btn-danger">
          Delete
        </button>
      </div>
    </magary-dialog>
  `
})
export class ConfirmationDialogComponent {
  confirmVisible = signal(false);

  showConfirmation() {
    this.confirmVisible.set(true);
  }

  confirmDelete() {
    // Perform deletion
    this.confirmVisible.set(false);
  }
}

​
Form Dialog

@Component({
  template: `
    <button (click)="showForm()">Add User</button>
    
    <magary-dialog
      [(visible)]="formVisible"
      header="Add New User"
      [modal]="true"
      [draggable]="true"
      width="600px">
      <form [formGroup]="userForm" (ngSubmit)="submitForm()">
        <div class="form-group">
          <label>Name</label>
          <input type="text" formControlName="name" class="form-control" />
        </div>
        <div class="form-group">
          <label>Email</label>
          <input type="email" formControlName="email" class="form-control" />
        </div>
        <div class="form-group">
          <label>Role</label>
          <select formControlName="role" class="form-control">
            <option value="user">User</option>
            <option value="admin">Admin</option>
          </select>
        </div>
        <div class="flex justify-end gap-2 mt-4">
          <button type="button" (click)="formVisible.set(false)" class="btn btn-secondary">
            Cancel
          </button>
          <button type="submit" class="btn btn-primary">
            Save User
          </button>
        </div>
      </form>
    </magary-dialog>
  `
})
export class FormDialogComponent {
  formVisible = signal(false);
  userForm = this.fb.group({
    name: ['', Validators.required],
    email: ['', [Validators.required, Validators.email]],
    role: ['user']
  });

  constructor(private fb: FormBuilder) {}

  showForm() {
    this.userForm.reset();
    this.formVisible.set(true);
  }

  submitForm() {
    if (this.userForm.valid) {
      console.log('Form data:', this.userForm.value);
      this.formVisible.set(false);
    }
  }
}

​
Glass Effect Dialog

<magary-dialog
  [(visible)]="visible"
  header="Glass Dialog"
  [glass]="true"
  [modal]="true"
  width="500px"
  backgroundColor="rgba(255, 255, 255, 0.1)"
  [showBorder]="false">
  <p>This dialog has a modern glass morphism effect.</p>
</magary-dialog>

​
Positioning

// Center (default)
<magary-dialog [(visible)]="visible" position="center">

// Top
<magary-dialog [(visible)]="visible" position="top">

// Bottom right
<magary-dialog [(visible)]="visible" position="bottom-right">

​
Animations

The dialog includes built-in animations:
  • Mask Animation: Backdrop fade in/out
  • Dialog Animation: Scale and fade in/out
Listen to animation events: 
@Component({
  template: `
    <magary-dialog
      [(visible)]="visible"
      (onShow)="handleShow($event)"
      (onHide)="handleHide($event)">
      Content
    </magary-dialog>
  `
})
export class AnimatedDialogComponent {
  handleShow(event: AnimationEvent) {
    console.log('Dialog shown');
  }

  handleHide(event: AnimationEvent) {
    console.log('Dialog hidden');
  }
}

​
Accessibility

  • Focus Management: Automatically focuses first element when opened
  • Focus Trap: Keeps focus within dialog when trapFocus is enabled
  • Keyboard Support:
    • Escape to close (when closeOnEscape is true)
    • Tab to cycle through focusable elements
    • Shift+Tab for reverse navigation
  • ARIA Attributes: Proper role="dialog", aria-modal, and aria-labelledby
  • Screen Reader Support: Dialog announced when opened

​
Styling

Key CSS classes:
  • magary-dialog-mask - Backdrop overlay
  • magary-dialog - Dialog container
  • magary-dialog-header - Header section
  • magary-dialog-content - Content area
  • magary-dialog-footer - Footer section
  • magary-dialog-maximized - Maximized state

​
Use Cases

  • Confirmation Prompts: Confirm destructive actions
  • Forms: Collect user input
  • Detailed Views: Show item details
  • Image Viewers: Display images in overlay
  • Wizards: Multi-step processes
  • Settings: Configuration panels

​
Source

View source: projects/ng-magary/src/lib/Overlay/dialog/dialog.ts:65

Build docs developers (and LLMs) love

Get started for freeTalk to us