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:

typescript

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:

css

#dialog-container {
  height: 500px;
}

Common Patterns

Pattern 1: Modal Confirmation Dialog

typescript

// 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 #footer>
    <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)

typescript

// 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 #footer>
    <button class="e-control e-btn e-primary" (click)="onSubmit()">
      Submit
    </button>
  </ng-template>
</ejs-dialog>

Pattern 3: Positioned Dialog

typescript

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

Key Props Quick Reference

Property	Type	Purpose	Example
`isModal`	boolean	Block parent interaction	`[isModal]="true"`
`showCloseIcon`	boolean	Show close button in header	`[showCloseIcon]="true"`
`width`	string \| number	Set dialog width	`width="400px"`
`height`	string \| number	Set dialog height	`height="300px"`
`minHeight`	string \| number	Minimum height constraint	`[minHeight]="200"`
`position`	PositionDataModel	Set position (X, Y) or preset	`[position]="{ X: 'center', Y: 'center' }"`
`target`	HTMLElement \| string	Set container element	`target="#container"`
`content`	string \| HTMLElement	Set content text or HTML	`content="Hello"`
`header`	string \| HTMLElement	Set header text or element	`header="Title"`
`buttons`	ButtonPropsModel[]	Add footer buttons	`[buttons]="buttonArray"`
`closeOnEscape`	boolean	Close on Escape key	`[closeOnEscape]="true"`
`allowDragging`	boolean	Enable header dragging	`[allowDragging]="true"`
`enableResize`	boolean	Enable resizing	`[enableResize]="true"`
`resizeHandles`	ResizeDirections[]	Specify resize directions	`[resizeHandles]="['All']"`
`cssClass`	string	Custom CSS class(es)	`cssClass="custom-dialog"`
`animationSettings`	AnimationSettingsModel	Configure animations	`[animationSettings]="{ effect: 'FadeZoom' }"`
`enablePersistence`	boolean	Save state between reloads	`[enablePersistence]="true"`
`zIndex`	number	Z-order for layering	`[zIndex]="1000"`

Common Use Cases

Confirmation before delete - Modal dialog asking user to confirm deletion
Form submission - Dialog with form for user to submit data
Alerts and notifications - Display important information to users
Multi-step processes - Use nested dialogs for workflows
Settings panels - Modeless dialog for settings that don't block interaction
Help and guidance - Display help content in a draggable dialog
Loading states - Show progress in a dialog while processing
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?

Need	Dialog Type	API
Warn/inform user, single OK	Alert	`DialogUtility.alert(...)`
Ask for confirmation (OK + Cancel)	Confirm	`DialogUtility.confirm(...)`
Collect user input (HTML content + OK + Cancel)	Prompt	`DialogUtility.confirm(...)` with input in `content`

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

bash

ng add @syncfusion/ej2-angular-popups

typescript

// 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() }
    });
  }
}

css

/* 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:

typescript

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:

typescript

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:

typescript

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

Property	Purpose	Default
`title`	Dialog header text	—
`content`	Body text or HTML string	—
`width`	Dialog width (px or %)	`'100%'`
`isModal`	Overlay + modal behavior	`false`
`isDraggable`	Allow header drag to reposition	`false`
`showCloseIcon`	Show × close button	`false`
`closeOnEscape`	Close on ESC key	`false`
`position`	`{ X, Y }` — predefined or offset	`center/center`
`animationSettings`	`{ effect, duration, delay }`	`Fade, 400ms`
`okButton`	OK button config `{ text, icon, click }`	—
`cancelButton`	Cancel button config `{ text, icon, click }`	—
`cssClass`	Custom CSS class on dialog root	`''`
`zIndex`	Stacking order	`1000`
`open`	Callback after dialog opens	—
`close`	Callback after dialog closes	—

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

bash

ng add @syncfusion/ej2-angular-popups

typescript

// 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 {}

css

/* 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)

html

<!-- 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

html

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

Sticky tooltip with close button

html

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

HTML content tooltip

typescript

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

html

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

Programmatic open/close (custom mode)

typescript

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

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

html

<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

Property	Type	Default	Purpose
`content`	`string \| HTMLElement`	—	Tooltip content
`position`	`Position`	`'TopCenter'`	Where tooltip appears
`opensOn`	`string`	`'Auto'`	Trigger: Auto/Hover/Click/Focus/Custom
`isSticky`	`boolean`	`false`	Keep open until manually closed
`mouseTrail`	`boolean`	`false`	Follow mouse pointer
`openDelay`	`number`	`0`	Delay (ms) before opening
`closeDelay`	`number`	`0`	Delay (ms) before closing
`animation`	`AnimationModel`	FadeIn/FadeOut 150ms	Open/close animation
`target`	`string`	—	Selector for multi-target
`cssClass`	`string`	`null`	Custom CSS class
`showTipPointer`	`boolean`	`true`	Show/hide arrow tip
`width` / `height`	`string \| number`	`'auto'`	Dimensions

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

syncfusion-angular-popups

NPX Install

Tags

SKILL.md Content

Implementing Syncfusion Angular Popups

Dialog

Component Overview

Key Features

Documentation and Navigation Guide

Getting Started

Dialog Modes & Types

Content & Templates

Positioning & Sizing

Styling & Customization

Accessibility & Forms

Interaction & Events

Advanced Patterns

API Reference (Complete)

Quick Start Example

Common Patterns

Pattern 1: Modal Confirmation Dialog

Pattern 2: Dialog with Form (Reactive Forms)

Pattern 3: Positioned Dialog

Key Props Quick Reference

Common Use Cases

Related Skills

Predefined Dialogs

Which Dialog Type?

Quick Start

Common Patterns

Key Properties at a Glance

Documentation

Getting Started

Customization

Position and Dimension

Animation and Draggable

Events and Patterns

API Reference

Tooltip

Navigation Guide

Getting Started

Content

Position & Dimensions

Open Modes

Animation

Customization & Style

Accessibility

API Reference

Quick Start

Common Patterns

Multi-target tooltip (single instance)

Tooltip that opens on click

Sticky tooltip with close button

HTML content tooltip

Programmatic open/close (custom mode)

Key Properties at a Glance