Skip to main content Home Creators syncfusion angular-ui-components-skills syncfusion-angular-popups
syncfusion-angular-popups Comprehensive guide for implementing Syncfusion Angular popup components including Dialog, Predefined Dialogs and Tooltip. Use this when building modal/modeless dialogs, confirmation popups, forms in dialogs, draggable windows, popovers, tooltips, and overlaid content with custom positioning, animations, WCAG 2.2 accessibility, forms integration, and event handling in Angular applications.
Jump to install Skills Marketplace Discover and explore AI skills built by the community.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Show prompt details A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/syncfusion/angular-ui-components-skills --skill syncfusion-angular-popupsThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Download Zip Downloading... name syncfusion-angular-popups description Comprehensive guide for implementing Syncfusion Angular popup components including Dialog, Predefined Dialogs and Tooltip. Use this when building modal/modeless dialogs, confirmation popups, forms in dialogs, draggable windows, popovers, tooltips, and overlaid content with custom positioning, animations, WCAG 2.2 accessibility, forms integration, and event handling in Angular applications. metadata {"author":"Syncfusion Inc","version":"34.1.29","category":"Layout"}
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 interactionTemplates - Customizable headers, content, and footersPositioning - 9 built-in positions or custom placementAnimations - Smooth open/close effects (Fade, Zoom, Slide)Draggable & Resizable - Allow users to move and resize dialogsForms Integration - Reactive and template-driven formsAccessibility - Full WCAG 2.2 Level AA support with ARIAKeyboard Navigation - Tab, Escape, Enter, and arrow keysResponsive - Full-screen mode on mobile devices
Documentation and Navigation Guide
When you need to implement Dialog features, follow these references:
Getting Started
Installation and setup in Angular 21+
Basic dialog implementation
CSS imports and themes
Opening and closing dialogs
Built-in button support
Dialog Modes & Types
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
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
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
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
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
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
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)
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 ();
}
}
#dialog-container {
height : 500px ;
}
Common Patterns
Pattern 1: Modal Confirmation Dialog
<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 >
Pattern 2: Dialog with Form (Reactive Forms)
<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 >
Pattern 3: Positioned Dialog
<ejs-dialog
[position]="{ X: 100, Y: 50 }"
width="400px"
content="Positioned Dialog"
>
</ejs-dialog>
Key Props Quick Reference Property Type Purpose Example isModalboolean Block parent interaction [isModal]="true"showCloseIconboolean Show close button in header [showCloseIcon]="true"widthstring | number Set dialog width width="400px"heightstring | number Set dialog height height="300px"minHeightstring | number Minimum height constraint [minHeight]="200"positionPositionDataModel Set position (X, Y) or preset [position]="{ X: 'center', Y: 'center' }"targetHTMLElement | string Set container element target="#container"contentstring | HTMLElement Set content text or HTML content="Hello"headerstring | HTMLElement Set header text or element header="Title"buttonsButtonPropsModel[] Add footer buttons [buttons]="buttonArray"closeOnEscapeboolean Close on Escape key [closeOnEscape]="true"allowDraggingboolean Enable header dragging [allowDragging]="true"enableResizeboolean Enable resizing [enableResize]="true"resizeHandlesResizeDirections[] Specify resize directions [resizeHandles]="['All']"cssClassstring Custom CSS class(es) cssClass="custom-dialog"animationSettingsAnimationSettingsModel Configure animations [animationSettings]="{ effect: 'FadeZoom' }"enablePersistenceboolean Save state between reloads [enablePersistence]="true"zIndexnumber Z-order for layering [zIndex]="1000"
Common Use Cases
Confirmation before delete - Modal dialog asking user to confirm deletionForm submission - Dialog with form for user to submit dataAlerts and notifications - Display important information to usersMulti-step processes - Use nested dialogs for workflowsSettings panels - Modeless dialog for settings that don't block interactionHelp and guidance - Display help content in a draggable dialogLoading states - Show progress in a dialog while processingError handling - Display error messages in a modal
Related Skills
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 ng add @syncfusion/ej2-angular-popups
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 (); } },
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 ();
}
},
cancelButton : { text : 'Cancel' , click : () => dlg.hide () }
});
}
}
@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 Property Purpose Default titleDialog header text — contentBody text or HTML string — widthDialog width (px or %) '100%'isModalOverlay + modal behavior falseisDraggableAllow header drag to reposition falseshowCloseIconShow × close button falsecloseOnEscapeClose on ESC key falseposition{ X, Y } — predefined or offsetcenter/centeranimationSettings{ effect, duration, delay }Fade, 400msokButtonOK button config { text, icon, click } — cancelButtonCancel button config { text, icon, click } — cssClassCustom CSS class on dialog root ''zIndexStacking order 1000openCallback after dialog opens — closeCallback after dialog closes —
Documentation
Getting Started
Installation and package setup
CSS imports and theme options
Basic alert, confirm, and prompt examples
All DialogUtility option properties
Customization
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
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
animationSettings effect options (Zoom, Fade, FadeZoom, etc.)Duration and delay configuration
isDraggable for all dialog types
Events and Patterns
open and close event callbacksisModal, zIndex, cssClass advanced usageCommon real-world patterns (delete confirm, form prompt, info alert)
Managing multiple dialog instances
API Reference
Complete DialogUtility.alert() and DialogUtility.confirm() options
okButton / cancelButton ButtonArgs propertiesAnimationSettingsModel propertiesPositionDataModel propertiesDialogComponent 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
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
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
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
opensOn: Auto, Hover, Click, Focus, CustomCombining multiple open modes
Custom mode with programmatic open()/close()
Sticky mode (isSticky)
Open/close delay
Animation
animation property with open/close settingsAll supported animation effects
Applying animations via open()/close() methods
Custom transition effects
Customization & Style
cssClass for custom stylesCSS class reference for tooltip structure
Tip pointer customization
Fancy tips (curved, bubble)
SVG and canvas tooltips
Tooltips on disabled elements
Container, RTL, htmlAttributes
Accessibility
WCAG 2.2, Section 508 compliance
WAI-ARIA attributes
Keyboard navigation
Screen reader support
API Reference
All properties, methods, and events
Type definitions and defaults
TooltipEventArgs, AnimationModel, TooltipAnimationSettingsPosition, TipPointerPosition, and Effect enumerations
Quick Start ng add @syncfusion/ej2-angular-popups
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 {}
@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)
<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 Property Type Default Purpose contentstring | HTMLElement— Tooltip content positionPosition'TopCenter'Where tooltip appears opensOnstring'Auto'Trigger: Auto/Hover/Click/Focus/Custom isStickybooleanfalseKeep open until manually closed mouseTrailbooleanfalseFollow mouse pointer openDelaynumber0Delay (ms) before opening closeDelaynumber0Delay (ms) before closing animationAnimationModelFadeIn/FadeOut 150ms Open/close animation targetstring— Selector for multi-target cssClassstringnullCustom CSS class showTipPointerbooleantrueShow/hide arrow tip width / heightstring | number'auto'Dimensions
More from this repository
syncfusion-angular-calendars Comprehensive guide for implementing Syncfusion Angular Calendar components including Calendar, DatePicker, DateRangePicker, DateTimePicker, and TimePicker. Covers installation, data binding, date/time selection, range selection, formatting, localization, masking, validation, customization, templates, accessibility, and controlled component patterns in Angular applications.
syncfusion-angular-data-manager Implements Syncfusion Angular DataManager for local/remote binding, CRUD, querying, caching, and middleware. Supports JsonAdaptor, ODataAdaptor, ODataV4Adaptor, UrlAdaptor, WebApiAdaptor, WebMethodAdaptor, RemoteSaveAdaptor, GraphQLAdaptor, CustomDataAdaptor, and CustomAdaptor. Covers Query class, filtering, sorting, paging, grouping, persistence, offline mode, caching, and error handling.
Implements Syncfusion Angular Grid component for feature-rich data tables and grids. Use this when working with data display, sorting, filtering, grouping, aggregates, editing, or exporting. This skill covers grid configuration, CRUD operations, virtual scrolling or infinite scrolling, hierarchy grids, state persistence, and advanced data management features for data-intensive applications.
Related occupations SOC
Based on SOC occupation classification
