MemberJunction: Angular component for a generic dialog
npm install @memberjunction/ng-generic-dialogA 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.
``bash`
npm install @memberjunction/ng-generic-dialog
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.
`mermaid
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
`
`typescript
import { GenericDialogModule } from '@memberjunction/ng-generic-dialog';
@NgModule({
imports: [GenericDialogModule]
})
export class YourModule {}
`
` Are you sure you want to delete this item? This action cannot be undone.html`
DialogWidth="400px"
DialogHeight="200px"
[DialogVisible]="showDeleteConfirm"
OKButtonText="Delete"
CancelButtonText="Keep"
(DialogClosed)="handleDeleteConfirmation($event)">
`html
[DialogVisible]="showDialog"
[ShowOKButton]="false"
CancelButtonText="Close"
(DialogClosed)="onDialogClosed($event)"
(RefreshData)="loadDialogData()">
API Reference
$3
mj-generic-dialog$3
| 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 |$3
| Event | Type | Description |
|-------|------|-------------|
|
DialogClosed | EventEmitter | true if OK was clicked, false if Cancel or X |
| RefreshData | EventEmitter | Emitted when dialog becomes visible, for loading fresh data |$3
| Method | Description |
|--------|-------------|
|
HandleOKClick() | Programmatically trigger OK (closes dialog, emits true) |
| HandleCancelClick() | Programmatically trigger Cancel (closes dialog, emits false) |$3
- 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- @memberjunction/ng-find-record -- Uses generic dialog for record search modal
- @memberjunction/ng-record-selector -- Uses generic dialog for record selection modal