Syncfusion Angular Popups

Implementing Syncfusion Angular Popups

Dialog

The Dialog component is a window that displays information to the user and is used to get user input. It supports both modal dialogs (blocking parent interaction) and modeless dialogs (allowing parent interaction).

Component Overview

Key Features

• Modal & Modeless modes - Block or allow parent interaction
• Templates - Customizable headers, content, and footers
• Positioning - 9 built-in positions or custom placement
• Animations - Smooth open/close effects (Fade, Zoom, Slide)
• Draggable & Resizable - Allow users to move and resize dialogs
• Forms Integration - Reactive and template-driven forms
• Accessibility - Full WCAG 2.2 Level AA support with ARIA
• Keyboard Navigation - Tab, Escape, Enter, and arrow keys
• Responsive - Full-screen mode on mobile devices

Documentation and Navigation Guide

When you need to implement Dialog features, follow these references:

Getting Started

📄 Read: references/dialog-getting-started.md

• Installation and setup in Angular 21+
• Basic dialog implementation
• CSS imports and themes
• Opening and closing dialogs
• Built-in button support

Dialog Modes & Types

📄 Read: references/dialog-modal-vs-modeless.md

• Modal dialog behavior (blocks parent interaction)
• Modeless dialog behavior (allows parent interaction)
• Use cases and when to use each mode
• Toggling between modes
• Overlay customization and styling

Content & Templates

📄 Read: references/dialog-templates-and-content.md

• Header templates and customization
• Content as strings, HTML, or ng-template
• Footer templates with buttons
• Using ng-content for dynamic content
• Button binding and click events
• Dynamic button arrays

Positioning & Sizing

📄 Read: references/dialog-positioning-and-sizing.md

• Built-in positions (9 locations: Top, Center, Bottom, etc.)
• Custom positioning with X, Y coordinates
• Width and height configuration
• Min/max height constraints
• Responsive sizing on different screen sizes
• Full-screen mode on mobile devices

Styling & Customization

📄 Read: references/dialog-styling-and-customization.md

• CSS class customization (header, content, footer, overlay)
• Theme integration (Material, Bootstrap, Tailwind, Fluent)
• Dark mode support
• Animation effects (Fade, Zoom, SlideLeft, SlideRight, etc.)
• Icon customization (close button, resize handles)
• RTL (Right-to-Left) language support

Accessibility & Forms

📄 Read: references/dialog-accessibility-and-forms.md

• WCAG 2.2 Level AA compliance standards
• ARIA attributes (aria-labelledby, aria-describedby, aria-modal, aria-grabbed)
• Keyboard navigation patterns (Tab, Shift+Tab, Escape, Enter)
• Screen reader support and best practices
• Form validation with FormValidator
• Reactive forms patterns
• Template-driven forms patterns
• Custom validation rules and error handling

Interaction & Events

📄 Read: references/dialog-interaction-and-events.md

• Dialog open/close events
• Draggable dialogs (allow users to move dialogs)
• Resizable dialogs (allow users to resize)
• Button click events and handling
• Content interaction patterns
• Preventing dialog closure
• Focus management
• Dialog lifecycle events

Advanced Patterns

📄 Read: references/dialog-advanced-patterns.md

• Nested dialogs (dialog within dialog)
• Ajax-loaded content dynamically
• Utility functions for programmatic creation
• Complex layouts (Rich Text Editor, multi-step forms)
• Scroll handling and auto-centering
• Custom event emitters
• Routing integration patterns

API Reference (Complete)

📄 Read: references/dialog-api-reference.md

• Complete Dialog API documentation
• All valid properties with types and examples
• All methods (show, hide, refresh, destroy)
• All events (beforeOpen, beforeClose, drag, resize, etc.)
• Interfaces and models (AnimationSettingsModel, ButtonPropsModel, etc.)
• Valid enumerations (DialogEffect, ResizeDirections)
• Official Syncfusion documentation links

Quick Start Example

Here's a minimal example to open a basic modal dialog:

import { Component, ViewChild } from '@angular/core';
import { DialogModule, DialogComponent } from '@syncfusion/ej2-angular-popups';

@Component({
  selector: 'app-root',
  imports: [DialogModule],
  template: `
    <div id="dialog-container" style="height: 500px;">
      <button class="e-control e-btn" (click)="onOpenDialog()">
        Open Dialog
      </button>
      
      <ejs-dialog 
        #ejDialog
        target="#dialog-container"
        [showCloseIcon]="true"
        width="400px"
        content="This is a Dialog content"
      >
        <ng-template #header>
          <div class="e-dlg-header-content">
            <span>Dialog Title</span>
          </div>
        </ng-template>
      </ejs-dialog>
    </div>
  `
})
export class AppComponent {
  @ViewChild('ejDialog') ejDialog!: DialogComponent;

  onOpenDialog(): void {
    this.ejDialog.show();
  }
}

CSS:

#dialog-container {
  height: 500px;
}

Common Patterns

Pattern 1: Modal Confirmation Dialog

// Create a modal dialog for confirmation
<ejs-dialog 
  [isModal]="true"
  [showCloseIcon]="true"
  width="350px"
  content="Are you sure you want to delete this item?"
>
  <ng-template #footerTemplate>
    <button class="e-control e-btn e-primary" (click)="onConfirm()">
      Yes, Delete
    </button>
    <button class="e-control e-btn" (click)="onCancel()">
      Cancel
    </button>
  </ng-template>
</ejs-dialog>

Pattern 2: Dialog with Form (Reactive Forms)

// Dialog containing a reactive form
<ejs-dialog [showCloseIcon]="true" width="450px">
  <form [formGroup]="form">
    <div class="e-dlg-content">
      <input formControlName="name" placeholder="Enter name" />
      <input formControlName="email" placeholder="Enter email" />
    </div>
  </form>
  
  <ng-template #footerTemplate>
    <button class="e-control e-btn e-primary" (click)="onSubmit()">
      Submit
    </button>
  </ng-template>
</ejs-dialog>

Pattern 3: Positioned Dialog

// Dialog positioned at a specific location
<ejs-dialog 
  [position]="{ X: 100, Y: 50 }"
  width="400px"
  content="Positioned Dialog"
>
</ejs-dialog>

Key Props Quick Reference

Common Use Cases

1. Confirmation before delete - Modal dialog asking user to confirm deletion
2. Form submission - Dialog with form for user to submit data
3. Alerts and notifications - Display important information to users
4. Multi-step processes - Use nested dialogs for workflows
5. Settings panels - Modeless dialog for settings that don't block interaction
6. Help and guidance - Display help content in a draggable dialog
7. Loading states - Show progress in a dialog while processing
8. Error handling - Display error messages in a modal

Related Skills

• Dialog Animation - Customize open/close animations
• Form Validation - Validate user input in dialogs
• Routing Integration - Use dialogs with Angular routing

Predefined Dialogs

This skill covers building alert, confirm, and prompt dialogs using Syncfusion's DialogUtility — a zero-template, utility-first approach to displaying modal feedback and user-input dialogs in Angular applications.

Which Dialog Type?

Key insight: Angular's predefined dialogs have no separate "prompt" method — use DialogUtility.confirm() with custom HTML in the content property to build a prompt pattern.

Quick Start

ng add @syncfusion/ej2-angular-popups

// src/app/app.ts
import { Component } from '@angular/core';
import { DialogModule } from '@syncfusion/ej2-angular-popups';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { DialogUtility } from '@syncfusion/ej2-popups';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [DialogModule, ButtonModule],
  template: `
    <button ejs-button cssClass="e-danger" (click)="showAlert()">Alert</button>
    <button ejs-button cssClass="e-success" (click)="showConfirm()" style="margin-left:8px">Confirm</button>
    <button ejs-button [isPrimary]="true" (click)="showPrompt()" style="margin-left:8px">Prompt</button>
  `
})
export class App {
  showAlert(): void {
    DialogUtility.alert({
      title: 'Warning',
      content: 'Disk space is running low.',
      width: '280px'
    });
  }

  showConfirm(): void {
    const dlg = DialogUtility.confirm({
      title: 'Delete Item',
      content: 'Are you sure you want to delete this item?',
      width: '300px',
      okButton: { text: 'Yes', click: () => { dlg.hide(); /* handle confirm */ } },
      cancelButton: { text: 'No', click: () => { dlg.hide(); } }
    });
  }

  showPrompt(): void {
    const dlg = DialogUtility.confirm({
      title: 'Enter Name',
      content: '<p>Your name:</p><input id="nameInput" class="e-input" type="text" placeholder="Type here..." />',
      width: '300px',
      okButton: {
        text: 'Submit',
        click: () => {
          const value = (document.getElementById('nameInput') as HTMLInputElement).value;
          dlg.hide();
          // use value
        }
      },
      cancelButton: { text: 'Cancel', click: () => dlg.hide() }
    });
  }
}

/* styles.css */
@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-icons/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-angular-popups/styles/material3.css';

Common Patterns

Pattern 1 — Delete confirmation with icons:

DialogUtility.confirm({
  title: 'Delete Files',
  content: 'Permanently delete selected files?',
  width: '300px',
  okButton: { text: 'Yes', icon: 'e-icons e-check' },
  cancelButton: { text: 'No', icon: 'e-icons e-close' }
});

Pattern 2 — Alert with close button + ESC support:

DialogUtility.alert({
  title: 'Session Expired',
  content: 'Your session has expired. Please log in again.',
  width: '300px',
  showCloseIcon: true,
  closeOnEscape: true
});

Pattern 3 — Positioned modal confirm:

DialogUtility.confirm({
  title: 'Confirm Action',
  content: 'Submit the form?',
  isModal: true,
  position: { X: 'center', Y: 'center' },
  animationSettings: { effect: 'Zoom' },
  isDraggable: true,
  width: '280px'
});

Key Properties at a Glance

Documentation

Getting Started

📄 Read: references/getting-started.md

• Installation and package setup
• CSS imports and theme options
• Basic alert, confirm, and prompt examples
• All DialogUtility option properties

Customization

📄 Read: references/customization.md

• Button text and icon customization
• Show/hide close icon and ESC behavior
• Custom HTML content in dialogs
• Programmatic dialog close with hide()

Position and Dimension

📄 Read: references/position-and-dimension.md

• Position X/Y values and offset usage
• Width and height properties
• Max-width/max-height via cssClass
• Min-width/min-height via cssClass

Animation and Draggable

📄 Read: references/animation-and-draggable.md

• animationSettings effect options (Zoom, Fade, FadeZoom, etc.)
• Duration and delay configuration
• isDraggable for all dialog types

Events and Patterns

📄 Read: references/events-and-patterns.md

• open and close event callbacks
• isModal, zIndex, cssClass advanced usage
• Common real-world patterns (delete confirm, form prompt, info alert)
• Managing multiple dialog instances

API Reference

📄 Read: references/api.md

• Complete DialogUtility.alert() and DialogUtility.confirm() options
• okButton / cancelButton ButtonArgs properties
• AnimationSettingsModel properties
• PositionDataModel properties
• DialogComponent properties, methods, and events

Tooltip

The Syncfusion Angular Tooltip (ejs-tooltip) displays a pop-up with information or a message when you hover, click, focus, or touch a target element. It supports 12 positions, animations, HTML/template/AJAX content, sticky mode, mouse trailing, and full accessibility compliance.

Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Installation and package setup (ng add @syncfusion/ej2-angular-popups)
• CSS theme imports
• Basic single-target tooltip
• Multi-target tooltip with target property
• Standalone (Angular 19+) and module-based setup

Content

📄 Read: references/content.md

• Static text and HTML string content
• Template content using ng-template
• Dynamic content via AJAX/Fetch in beforeRender event
• Loading HTML elements (iframes, videos) in tooltip
• enableHtmlParse and enableHtmlSanitizer options

Position & Dimensions

📄 Read: references/position-and-dimension.md

• All 12 position values (TopCenter, BottomLeft, etc.)
• Tip pointer show/hide and position
• Mouse trailing
• Offset values (offsetX, offsetY)
• Width, height, and scroll mode
• Window collision handling

Open Modes

📄 Read: references/open-mode.md

• opensOn: Auto, Hover, Click, Focus, Custom
• Combining multiple open modes
• Custom mode with programmatic open()/close()
• Sticky mode (isSticky)
• Open/close delay

Animation

📄 Read: references/animation.md

• animation property with open/close settings
• All supported animation effects
• Applying animations via open()/close() methods
• Custom transition effects

Customization & Style

📄 Read: references/customization-and-style.md

• cssClass for custom styles
• CSS class reference for tooltip structure
• Tip pointer customization
• Fancy tips (curved, bubble)
• SVG and canvas tooltips
• Tooltips on disabled elements
• Container, RTL, htmlAttributes

Accessibility

📄 Read: references/accessibility.md

• WCAG 2.2, Section 508 compliance
• WAI-ARIA attributes
• Keyboard navigation
• Screen reader support

API Reference

📄 Read: references/api.md

• All properties, methods, and events
• Type definitions and defaults
• TooltipEventArgs, AnimationModel, TooltipAnimationSettings
• Position, TipPointerPosition, and Effect enumerations

Quick Start

ng add @syncfusion/ej2-angular-popups

// src/app/app.ts (Angular 19+ standalone)
import { Component, ViewEncapsulation } from '@angular/core';
import { TooltipModule } from '@syncfusion/ej2-angular-popups';

@Component({
  standalone: true,
  imports: [TooltipModule],
  selector: 'app-root',
  encapsulation: ViewEncapsulation.None,
  template: `
    <ejs-tooltip content="Hello, I am a Tooltip!" position="BottomCenter">
      <button>Hover me</button>
    </ejs-tooltip>
  `
})
export class App {}

/* styles.css */
@import "@syncfusion/ej2-base/styles/material3.css";
@import "@syncfusion/ej2-angular-buttons/styles/material3.css";
@import "@syncfusion/ej2-angular-popups/styles/material3.css";

Common Patterns

Multi-target tooltip (single instance)

<!-- Wraps a container; target selector picks which children get tooltips -->
<ejs-tooltip target=".has-tip">
  <div id="container">
    <button class="has-tip" title="Save your work">Save</button>
    <button class="has-tip" title="Delete selected item">Delete</button>
    <button>No tooltip here</button>
  </div>
</ejs-tooltip>

Tooltip that opens on click

<ejs-tooltip content="Clicked!" opensOn="Click" position="RightCenter">
  <button>Click me</button>
</ejs-tooltip>

Sticky tooltip with close button

<ejs-tooltip content="I stay until you close me." [isSticky]="true">
  <span>Hover and pin me</span>
</ejs-tooltip>

HTML content tooltip

public htmlContent: string = '<b>Bold</b> and <i>italic</i> text with a <a href="#">link</a>.';

<ejs-tooltip [content]="htmlContent">
  <button>Rich content</button>
</ejs-tooltip>

Programmatic open/close (custom mode)

@ViewChild('tooltip') tooltip!: TooltipComponent;

openTip(): void {
  this.tooltip.open(this.tooltip.element);
}
closeTip(): void {
  this.tooltip.close();
}

<ejs-tooltip #tooltip content="Custom trigger" opensOn="Custom">
  <span>Target</span>
</ejs-tooltip>
<button (click)="openTip()">Show</button>
<button (click)="closeTip()">Hide</button>

Key Properties at a Glance

For full property, method, and event reference, read references/api.md.