@memberjunction/ng-generic-dialog

A flexible, customizable modal dialog component for Angular applications in the MemberJunction framework. Built on Kendo UI Dialog, it provides a consistent way to create modals with standard OK/Cancel buttons and custom action slots.

Installation

npm install @memberjunction/ng-generic-dialog

Overview

The Generic Dialog wraps Kendo UI’s dialog with a standardized API for content projection, configurable buttons, and a data refresh lifecycle. It serves as the foundation for many dialog experiences throughout MemberJunction applications.

flowchart TD
    A["Parent Component"] -->|DialogVisible=true| B["GenericDialogComponent"]
    B --> C["RefreshData event"]
    B --> D["Content Projection (body)"]
    B --> E["custom-actions slot"]
    B -->|OK clicked| F["DialogClosed(true)"]
    B -->|Cancel clicked| G["DialogClosed(false)"]

    style A fill:#2d6a9f,stroke:#1a4971,color:#fff
    style B fill:#7c5295,stroke:#563a6b,color:#fff
    style D fill:#2d8659,stroke:#1a5c3a,color:#fff
    style E fill:#2d8659,stroke:#1a5c3a,color:#fff
    style F fill:#b8762f,stroke:#8a5722,color:#fff
    style G fill:#b8762f,stroke:#8a5722,color:#fff

Usage

Module Import

import { GenericDialogModule } from '@memberjunction/ng-generic-dialog';

@NgModule({
  imports: [GenericDialogModule]
})
export class YourModule {}

Basic Confirmation Dialog

<mj-generic-dialog
  DialogTitle="Confirm Delete"
  DialogWidth="400px"
  DialogHeight="200px"
  [DialogVisible]="showDeleteConfirm"
  OKButtonText="Delete"
  CancelButtonText="Keep"
  (DialogClosed)="handleDeleteConfirmation($event)">
  <p>Are you sure you want to delete this item?</p>
  <p><strong>This action cannot be undone.</strong></p>
</mj-generic-dialog>

Dialog with Custom Actions

<mj-generic-dialog
  DialogTitle="Advanced Options"
  [DialogVisible]="showDialog"
  [ShowOKButton]="false"
  CancelButtonText="Close"
  (DialogClosed)="onDialogClosed($event)"
  (RefreshData)="loadDialogData()">

  <div>Your dialog content here</div>

  <div custom-actions>
    <button kendoButton (click)="saveSettings()" themeColor="primary">Save</button>
    <button kendoButton (click)="applySettings()">Apply</button>
  </div>
</mj-generic-dialog>

API Reference

Selector

mj-generic-dialog

Inputs

Property	Type	Default	Description
DialogTitle	string	'Default Title'	Title displayed in the dialog header
DialogWidth	string	'700px'	Width of the dialog (pixels or percentage)
DialogHeight	string	'450px'	Height of the dialog (pixels or percentage)
DialogVisible	boolean	false	Controls dialog visibility. Setting to true triggers RefreshData
ShowOKButton	boolean	true	Whether to show the OK button
OKButtonText	string	'OK'	Text on the OK button
ShowCancelButton	boolean	true	Whether to show the Cancel button
CancelButtonText	string	'Cancel'	Text on the Cancel button

Outputs

Event	Type	Description
DialogClosed	EventEmitter<boolean>	true if OK was clicked, false if Cancel or X
RefreshData	EventEmitter<void>	Emitted when dialog becomes visible, for loading fresh data

Public Methods

Method	Description
HandleOKClick()	Programmatically trigger OK (closes dialog, emits true)
HandleCancelClick()	Programmatically trigger Cancel (closes dialog, emits false)

Content Projection Slots

• Default slot — Content displayed in the dialog body
• custom-actions slot — Buttons projected into the action area (use custom-actions attribute)

Dependencies

• @progress/kendo-angular-dialog — Dialog rendering
• @progress/kendo-angular-buttons — Button components

Related Packages

• @memberjunction/ng-find-record — Uses generic dialog for record search modal
• @memberjunction/ng-record-selector — Uses generic dialog for record selection modal