Skip to main content Home Creators syncfusion angular-ui-components-skills syncfusion-angular-notifications
syncfusion-angular-notifications Comprehensive guide for implementing Syncfusion Angular notification components including Message, Skeleton, Toast, and Badge. Use this when displaying informational, success, warning, or error alerts with severity levels, customizing message variants (Text, Outlined, Filled), handling close events, showing content skeletons with shimmer/pulse animations during data loading, or adding status badges with 8 color variants and shape types (circle, pill, notification, dot, overlap). Covers MessageModule, SkeletonModule, ToastModule, CSS-based Badge implementation, accessibility, RTL, and custom styling 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-notificationsThe 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... 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
name syncfusion-angular-notifications description Comprehensive guide for implementing Syncfusion Angular notification components including Message, Skeleton, Toast, and Badge. Use this when displaying informational, success, warning, or error alerts with severity levels, customizing message variants (Text, Outlined, Filled), handling close events, showing content skeletons with shimmer/pulse animations during data loading, or adding status badges with 8 color variants and shape types (circle, pill, notification, dot, overlap). Covers MessageModule, SkeletonModule, ToastModule, CSS-based Badge implementation, accessibility, RTL, and custom styling in Angular applications. metadata {"author":"Syncfusion Inc","version":"34.1.29","category":"Notifications"}
Implementing Syncfusion Angular Notifications
Message
The Syncfusion Angular Message component (ejs-message) displays contextual messages with severity-based icons and colors to communicate importance to the user. It supports multiple severity types , visual variants , close icon , custom templates , content alignment , CSS customization , and full accessibility compliance .
Package: @syncfusion/ej2-angular-notificationsModule: MessageModuleSelector: ejs-message
📋 All files linked under references/ are read-only documentation and comply with the same security policy as this skill.
Navigation Guide
Getting Started
Installing @syncfusion/ej2-angular-notifications via ng add
CSS/SCSS theme imports (Material3)
MessageModule import in standalone componentMinimal ejs-message template setup
Running the application
Severity Types
severity property with all five values: Normal, Success, Info, Warning, ErrorDefault severity (Normal)
When to choose each severity type
Code example with all severities
Visual Variants
variant property: Text, Outlined, FilledDefault variant (Text)
Combining variant with severity
Full example showing all combinations
Icons and Close Icon
showIcon — hide/show the severity iconshowCloseIcon — add a close icon to dismiss messages(closed) event — react when user closes a messageRestoring visibility with visible property
Custom icon using cssClass
Customization and Templates
Content alignment: left (default), center (e-content-center), right (e-content-right)
Rounded and square border styles via cssClass
CSS-only message rendering (no script reference)
Predefined CSS classes for manual DOM structure
Rich HTML template via <ng-template #content>
Accessibility
WCAG 2.2 / Section 508 compliance
WAI-ARIA attributes (role=alert, aria-label)
Keyboard interaction (Tab, Enter/Space for close icon)
RTL support via enableRtl
Screen reader behavior
API Reference
All properties: content, cssClass, enablePersistence, enableRtl, locale, severity, showCloseIcon, showIcon, variant, visible
Methods: destroy(), getPersistData()
Events: closed, created, destroyed
Quick Start ng add @syncfusion/ej2-angular-notifications
@import '../node_modules/@syncfusion/ej2-base/styles/material3.css' ;
@import '../node_modules/@syncfusion/ej2-angular-notifications/styles/message/material3.css' ;
import { MessageModule } from '@syncfusion/ej2-angular-notifications' ;
import { Component } from '@angular/core' ;
@Component ({
imports : [MessageModule ],
standalone : true ,
selector : 'app-root' ,
template : '<ejs-message content="Please read the comments carefully"></ejs-message>'
})
export class AppComponent { }
Common Patterns
Message with Severity import { MessageModule } from '@syncfusion/ej2-angular-notifications' ;
import { Component } from '@angular/core' ;
@Component ({
imports : [MessageModule ],
standalone : true ,
selector : 'app-root' ,
template : `
<ejs-message content="Editing is restricted"></ejs-message>
<ejs-message content="Please read the comments carefully" severity="Info"></ejs-message>
<ejs-message content="Your message has been sent successfully" severity="Success"></ejs-message>
<ejs-message content="There was a problem with your network connection" severity="Warning"></ejs-message>
<ejs-message content="A problem occurred while submitting your data" severity="Error"></ejs-message>
`
})
export class AppComponent { }
Dismissable Message with Close Icon import { MessageModule } from '@syncfusion/ej2-angular-notifications' ;
import { Component , ViewChild } from '@angular/core' ;
import { MessageComponent } from '@syncfusion/ej2-angular-notifications' ;
@Component ({
imports : [MessageModule ],
standalone : true ,
selector : 'app-root' ,
template : `
<ejs-message #msg severity="Warning" [showCloseIcon]="true" (closed)="onClosed()">
There was a problem with your network connection
</ejs-message>
<button *ngIf="isClosed" (click)="reopen()">Show again</button>
`
})
export class AppComponent {
@ViewChild ('msg' ) msg!: MessageComponent ;
isClosed = false ;
onClosed (): void {
this .isClosed = true ;
}
reopen (): void {
this .msg .visible = true ;
this .isClosed = false ;
}
}
Filled Variant with Severity import { MessageModule } from '@syncfusion/ej2-angular-notifications' ;
import { Component } from '@angular/core' ;
@Component ({
imports : [MessageModule ],
standalone : true ,
selector : 'app-root' ,
template : `
<ejs-message content="Your message has been sent successfully"
severity="Success" variant="Filled">
</ejs-message>
`
})
export class AppComponent { }
Key Props at a Glance Property Type Default Purpose contentstring | objectnullText, HTML, or template content to display severitystring'Normal'Severity type: Normal, Success, Info, Warning, Error variantstring'Text'Visual style: Text, Outlined, Filled showIconbooleantrueShow/hide the severity icon showCloseIconbooleanfalseShow/hide the close icon visiblebooleantrueShow or hide the entire message cssClassstring''Custom CSS class(es) appended to root element enableRtlbooleanfalseRight-to-left rendering enablePersistencebooleanfalsePersist component state across page reloads localestring''Override global culture/localization
Skeleton The Skeleton component provides a visual placeholder for content that is loading or yet to be rendered. It helps improve perceived performance by showing users what content is coming, reducing cognitive load during loading states.
Package: @syncfusion/ej2-angular-notificationsModule: SkeletonModuleSelector: ejs-skeleton
📋 All files linked under references/ are read-only documentation and comply with the same security policy as this skill.
Navigation Guide
Getting Started
Installation and package setup
Dependencies and CSS imports
Basic skeleton implementation
Angular 19+ standalone architecture
Running your application with Skeleton
Shapes and Layout Design
Circle shapes for avatars and profile pictures
Square shapes for thumbnails and icons
Rectangle shapes for images and cards
Text shapes for paragraphs and content
Combining shapes to build complete layouts
Responsive sizing and responsive design
Shimmer Effects and Animation
Wave effect (default animation)
Pulse effect (fade in/out animation)
Fade effect (opacity change animation)
Changing effects dynamically
Performance considerations for multiple skeletons
Styling and Customization
Using cssClass for custom styling
Customizing wave/background colors
Setting width and height dimensions
Controlling visibility with the visible property
CSS variables for theming
Theme Studio integration
Accessibility Features
WCAG 2.2 and Section 508 compliance
Screen reader support and live regions
WAI-ARIA attributes (role, aria-label, aria-live, aria-busy)
Right-to-Left (RTL) support
Keyboard navigation and focus management
Color contrast requirements
Accessibility validation tools
API Reference
All properties with descriptions and defaults
Methods and lifecycle management
Event handling patterns
Type definitions (SkeletonType, ShimmerEffect)
Property usage examples
Complete API documentation
Quick Start import { Component } from '@angular/core' ;
import { SkeletonModule } from '@syncfusion/ej2-angular-notifications' ;
@Component ({
imports : [SkeletonModule ],
standalone : true ,
selector : 'app-root' ,
template : `
<div>
<h2>Loading User Profile...</h2>
<!-- Avatar skeleton -->
<ejs-skeleton shape="Circle" width="60px"></ejs-skeleton>
<!-- Name and description skeletons -->
<ejs-skeleton width="30%" height="15px"></ejs-skeleton>
<ejs-skeleton width="50%" height="15px"></ejs-skeleton>
<!-- Content skeleton -->
<ejs-skeleton shape="Rectangle" width="100%" height="150px"></ejs-skeleton>
</div>
`
})
export class AppComponent {}
Common Patterns
Pattern 1: Card Loading Skeleton Display a skeleton layout matching a card component during data loading:
@Component ({
selector : 'app-card-skeleton' ,
template : `
<div class='card-skeleton'>
<!-- Avatar -->
<div class='avatar-section'>
<ejs-skeleton shape="Circle" width="50px"></ejs-skeleton>
</div>
<!-- Content -->
<div class='content-section'>
<ejs-skeleton width="60%" height="12px"></ejs-skeleton>
<ejs-skeleton width="40%" height="12px"></ejs-skeleton>
<ejs-skeleton width="100%" height="80px"></ejs-skeleton>
</div>
<!-- Actions -->
<div class='action-section'>
<ejs-skeleton shape="Rectangle" width="30%" height="36px"></ejs-skeleton>
</div>
</div>
`
})
export class CardSkeletonComponent {}
Pattern 2: List Loading with Pulse Effect Show multiple skeleton rows with a pulsing shimmer effect:
@Component ({
selector : 'app-list-skeleton' ,
template : `
<div class='list-skeleton'>
<div class='list-item' *ngFor="let item of [1,2,3,4,5]">
<ejs-skeleton shape="Circle" width="40px" shimmerEffect="Pulse"></ejs-skeleton>
<div class='item-content'>
<ejs-skeleton width="50%" height="14px" shimmerEffect="Pulse"></ejs-skeleton>
<ejs-skeleton width="30%" height="12px" shimmerEffect="Pulse"></ejs-skeleton>
</div>
</div>
</div>
`
})
export class ListSkeletonComponent {}
Pattern 3: Conditional Skeleton Rendering Show skeleton while loading, hide when content is ready:
@Component ({
selector : 'app-conditional-skeleton' ,
template : `
<!-- Show skeleton while loading -->
<div *ngIf="isLoading">
<ejs-skeleton shape="Rectangle" width="100%" height="200px"
shimmerEffect="Wave"></ejs-skeleton>
</div>
<!-- Show content when loaded -->
<div *ngIf="!isLoading">
<img [src]="imageUrl" alt="Loaded content">
</div>
`
})
export class ConditionalSkeletonComponent {
isLoading = true ;
imageUrl = '' ;
ngOnInit (setTimeout (() => {
this .isLoading = false ;
this .imageUrl = 'assets/image.jpg' ;
}, 2000 );
}
}
Key Properties Property Type Default Purpose shapeSkeletonType 'Text' Defines skeleton shape: Text, Circle, Square, Rectangle shimmerEffectShimmerEffect 'Wave' Animation effect: Wave, Pulse, Fade widthstring | number '' Skeleton width (required for Circle/Square) heightstring | number '' Skeleton height visibleboolean true Controls skeleton visibility cssClassstring '' Custom CSS class for styling labelstring 'Loading…' Aria-label for accessibility enableRtlboolean false Enable right-to-left layout enablePersistenceboolean false Persist state between page reloads
Common Use Cases
Data Grid Loading : Show skeleton rows while grid data is loading from serverImage Gallery : Display placeholder rectangles while images downloadFeed/Timeline : Show multiple skeleton cards while loading feed itemsProfile Page : Combine shapes to preview profile layoutList with Avatars : Use Circle + Text shapes for user listsModal Content : Display skeleton inside dialogs during async operationsProduct Cards : Build skeleton matching product card layoutDashboard : Create skeleton layouts for dashboard widgets
Toast The Syncfusion Angular Toast (ejs-toast) is a non-blocking notification component that displays brief messages at a defined position on the screen. Toasts auto-dismiss after a configurable timeout and support rich content via templates, action buttons, icons, and progress bars.
Navigation Guide
Getting Started
Prerequisites and dependencies
Installing @syncfusion/ej2-angular-notifications
Adding CSS/theme imports
Basic toast setup (standalone + NgModule)
Showing a toast on component creation
Running the application
Configuration
Title and content properties
Custom target container
Show/hide close button (showCloseButton)
Progress bar (showProgressBar, progressDirection)
Newest on top (newestOnTop)
Width and height customization
Icon using icon property
cssClass for semantic types (e-success, e-info, e-warning, e-danger)enableHtmlSanitizer, enableRtl, locale
Position and Animation
Predefined X/Y positions (Left, Center, Right / Top, Bottom)
Custom pixel/percentage positions
Multiple toasts in different positions
Animation configuration (show/hide effects, duration, easing)
Default animation (FadeIn/FadeOut)
Templates and Action Buttons
HTML string and element ID templates
Angular ng-template with #template, #title, #content
Dynamic templates via show() method arguments
Action buttons with buttons property and click handlers
ButtonModelPropsModel configuration
Timeout and Events
timeOut property (default 5000ms)extendedTimeout on hover (default 1000ms)Static toast (timeOut: 0)
All events: created, open, close, click, beforeOpen, beforeClose, beforeSanitizeHtml, destroyed
Event argument types and cancellation patterns
Toast Utility Service
ToastUtility.show() for minimal-code toastsPredefined types: Information, Success, Error, Warning
Full ToastModel argument usage with events and positioning
When to use utility vs component approach
How-To Guides
Close toast on click/tap
Prevent duplicate toasts
Restrict maximum visible toasts
Add dynamic templates
Render Angular ng-template in toast
Show multiple toasts in various positions
Customize progress bar theme and sizing
Play audio before toast opens
Prevent toast close with mobile swipe
Show different types of toast
API Reference
All properties with types and defaults
Methods: show(), hide(), destroy()
All events with argument type links
ToastAnimationSettingsModel, ToastPositionModel, ButtonModelPropsModel
Quick Start
import { Component , ViewChild } from '@angular/core' ;
import { ToastModule } from '@syncfusion/ej2-angular-notifications' ;
@Component ({
imports : [ToastModule ],
standalone : true ,
selector : 'app-root' ,
template : `
<ejs-toast #toast (created)="onCreated()">
<ng-template #title><div>Notification</div></ng-template>
<ng-template #content><div>Your action was successful.</div></ng-template>
</ejs-toast>
<button (click)="toast.show()">Show Toast</button>
`
})
export class App {
@ViewChild ('toast' ) toast : any ;
onCreated (this .toast .show (); }
}
ng add @syncfusion/ej2-angular-notifications
@import '@syncfusion/ej2-base/styles/material3.css' ;
@import '@syncfusion/ej2-buttons/styles/material3.css' ;
@import '@syncfusion/ej2-popups/styles/material3.css' ;
@import '@syncfusion/ej2-angular-notifications/styles/material3.css' ;
Common Patterns
Success/Error/Warning/Info Toast
toastObj.show ({ content : 'File saved!' , cssClass : 'e-toast-success' });
toastObj.show ({ content : 'Upload failed.' , cssClass : 'e-toast-danger' });
toastObj.show ({ content : 'Low disk space.' , cssClass : 'e-toast-warning' });
toastObj.show ({ content : 'Update available.' , cssClass : 'e-toast-info' });
Quick Toast via ToastUtility import { ToastUtility } from '@syncfusion/ej2-angular-notifications' ;
ToastUtility .show ('Operation successful' , 'Success' , 3000 );
Toast with Progress Bar + Close Button <ejs-toast [showProgressBar ]="true" [showCloseButton ]="true" [timeOut ]="4000" >
</ejs-toast >
Toast Positioned Bottom-Center public position = { X : 'Center' , Y : 'Bottom' };
<ejs-toast [position ]="position" > </ejs-toast >
Action Buttons public buttons = [
{ model : { content : 'Undo' }, click : () => this .onUndo () },
{ model : { content : 'Dismiss' } }
];
Static Toast (no auto-dismiss) <ejs-toast [timeOut ]="0" [showCloseButton ]="true" > </ejs-toast >
Key Properties Property Type Default Purpose titleany null Toast heading text or HTML contentany null Toast body text or HTML timeOutnumber 5000 Auto-dismiss after ms (0 = static) positionToastPositionModel {X:'Left',Y:'Top'} Screen position showCloseButtonboolean false Show × dismiss button showProgressBarboolean false Show countdown progress bar progressDirectionstring 'Rtl' Progress bar direction (Ltr/Rtl) newestOnTopboolean true Insert new toasts before old ones cssClassstring null Custom CSS classes iconstring null CSS class for top-left icon targetstring/Element null Container element (default: body) widthstring/number '300' Toast width heightstring/number 'auto' Toast height buttonsButtonModelPropsModel[] [{}] Action buttons animationToastAnimationSettingsModel FadeIn/FadeOut Show/hide animation extendedTimeoutnumber 1000 Extra time on hover enableRtlboolean false Right-to-left rendering
Common Use Cases Scenario Approach Simple one-liner notification Use ToastUtility.show() Typed notification (success/error) cssClass: 'e-toast-success' or ToastUtility.show(..., 'Success', ...)Notification requiring user action Add buttons array with click handlers Persistent alert until dismissed Set timeOut: 0 + showCloseButton: true Multiple simultaneous toasts Use separate ejs-toast instances with different target containers Notification in custom container Set target property to element reference or selector Prevent duplicate messages Cancel in beforeOpen event if same title already visible Mobile-friendly (no swipe dismiss) Cancel beforeClose when args.type === 'swipe' Progress indicator showProgressBar: true, customize via beforeOpen event
Badge The Syncfusion Angular Badge is a pure CSS component — no Angular component class to import. Badges are applied by adding CSS modifier classes to a <span> (or <a>) element nested inside the target UI element.
Package: @syncfusion/ej2-angular-notifications
Key Features
8 color variants — primary, secondary, success, danger, warning, info, light, darkShape types — circle, pill, link, notification, dot, overlapPositioning — top (default) and bottom placement on parent elementsCustomization — custom colors, sizes, and arbitrary positions via CSSListView integration — embed badges in list items with dynamic content
Navigation Guide
Getting Started
Package installation and CSS imports
Adding the first badge to an Angular component
Minimal working example
Running the application
Badge Types and Shapes
8 predefined color variants and their semantic purpose
Circle, pill, link, notification, dot, overlap shape types
Badge positioning (top vs bottom)
When to combine modifier classes (e.g., overlap + notification + circle)
Customization
Custom color overrides with CSS classes
Adjusting badge size via font-size
Custom positioning (left-top, left-bottom) with CSS overrides
When to use custom CSS vs built-in modifier classes
How-To Guides
Integrate badges into a ListView component
Update badge content dynamically (increment counts)
Angular pattern for badge state management using DOM updates
Quick Start npm install @syncfusion/ej2-angular-notifications --save
2. Add CSS to src/styles.css:
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css" ;
@import "../node_modules/@syncfusion/ej2-notifications/styles/tailwind3.css" ;
3. Add a badge in your component:
<h1 > Badge Component <span class ="e-badge e-badge-primary" > New</span > </h1 >
Common Patterns
Notification badge on an icon
<div class ="badge-block" >
<div class ="skype svg_icons" > </div >
<span class ="e-badge e-badge-success e-badge-overlap e-badge-notification" > 99+</span >
</div >
Dot status indicator (bottom position) <div class ="badge-block" >
<div class ="firefox svg_icons" > </div >
<span class ="e-badge e-badge-success e-badge-overlap e-badge-dot e-badge-bottom" > </span >
</div >
Pill-shaped label <h1 > Messages <span class ="e-badge e-badge-primary e-badge-pill" > New</span > </h1 >
CSS Class Reference Class Purpose e-badgeRequired base class for all badges e-badge-primary / e-badge-{color}Color variant e-badge-pillPill (rounded rectangle) shape e-badge-circleCircle shape e-badge-notificationNotification counter badge e-badge-dotMinimalist dot badge (no text) e-badge-overlapOverlaps the parent element edge e-badge-bottomPositions badge at bottom instead of top
